We Keep Coding

Display/hide divs after selection of multiple radio buttons

I am currently working on a filter that displays products categories through Radio Button selection:
<div class="round" id="r-group">x
<label for="r2" class="label-filter">
<input type="radio" id="r1" name="club-selection" value="club-selection">
<span class="label-text">The Club Selection</span>
</label>
<label for="r2" class="label-filter">
<input type="radio" id="r2" name="upholstery" value="upholstery">
<span class="label-text">All Upholstery</span>
</label>
<label for="r3" class="label-filter">
<input type="radio" id="r3" name="casegoods" value="casegoods">
<span class="label-text">All Casegoods</span>
</label>
<label for="r3" class="label-filter">
<input type="radio" id="r4" name="tables" value="tables">
<span class="label-text">All Tables</span>
</label>
<label for="r3" class="label-filter">
<input type="radio" id="r5" name="lighting" value="lighting">
<span class="label-text">All Lighting</span>
</label>
</div>
I want to be able show each category as I select the radio buttons. For example: If I select All Casegoods, I want to only show the div with data-category="casegoods". If I select Tables and Lighting I want to show the div with data-category="tables" and data-category="lighting". These are the basic structure of the divs per category:
<div class="product" data-category="club-selection">
<h4>The Club Selection</h4>
</div>
<div class="product" data-category="upholstery">
<h4>Upholstery</h4>
</div>
<div class="product" data-category="casegoods">
<h4>Casegoods</h4>
</div>
<div class="product" data-category="tables">
<h4>All Tables</h4>
</div>
<div class="product" data-category="lighting">
<h4>Lighting</h4>
</div>
So far, I am able to store the value of the selected radio buttons into an array (selectedValues), but I am not sure what to do next to be able to display only the divs of the categories selected.This is the code that store the values:
$(function(){
var items = $("[data-category]");//get all the elements that has data-categories attribute
items.show(); //show all of the elements we found above
$("input[type=radio]").on("change",function(ev){ //bind onchange event
var selectedValues = []; //this array will hold all of the current categories
$("input:checked").each(function(idx, checkedRadio){//get all of the input radio buttons that are checked and add the value of each of them to the selectedValues array we created above
selectedValues.push($(checkedRadio).val().toLowerCase());
//THIS IS WHERE I´M STUCK. What do I do with the values stored in the array?
});
});
});
EDIT:fixed the ids on the inputs.

You can do something like this:
var elems = $("[data-category]").filter(function() {
return selectedValues.indexOf($(this).data("category")) > -1;
});
elems.show();
I believe you want to use checkbox and not radio, since you cant deselect them again. Else you have to use the same name so you cant select more than one.
Also please note that many of your inputs have the same id, ID should always be unique.
Demo
$(function() {
var items = $("[data-category]"); //get all the elements that has data-categories attribute
items.show(); //show all of the elements we found above
$("input[type=checkbox]").on("change", function(ev) { //bind onchange event
$("[data-category]").hide()
var selectedValues = []; //this array will hold all of the current categories
$("input:checked").each(function(idx, checkedRadio) { //get all of the input radio buttons that are checked and add the value of each of them to the selectedValues array we created above
selectedValues.push($(checkedRadio).val().toLowerCase());
});
var elems = $("[data-category]").filter(function() {
return selectedValues.indexOf($(this).data("category")) > -1;
});
elems.show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="round" id="r-group">
<label for="r2" class="label-filter">
<input type="checkbox" id="r2" name="club-selection" value="club-selection">
<span class="label-text">The Club Selection</span>
</label>
<label for="r2" class="label-filter">
<input type="checkbox" id="r2" name="upholstery" value="upholstery">
<span class="label-text">All Upholstery</span>
</label>
<label for="r3" class="label-filter">
<input type="checkbox" id="r3" name="casegoods" value="casegoods">
<span class="label-text">All Casegoods</span>
</label>
<label for="r3" class="label-filter">
<input type="checkbox" id="r3" name="tables" value="tables">
<span class="label-text">All Tables</span>
</label>
<label for="r3" class="label-filter">
<input type="checkbox" id="r3" name="lighting" value="lighting">
<span class="label-text">All Lighting</span>
</label>
</div>
<div class="product" data-category="club-selection">
<h4>The Club Selection</h4>
</div>
<div class="product" data-category="upholstery">
<h4>Upholstery</h4>
</div>
<div class="product" data-category="casegoods">
<h4>Casegoods</h4>
</div>
<div class="product" data-category="tables">
<h4>All Tables</h4>
</div>
<div class="product" data-category="lighting">
<h4>Lighting</h4>
</div>

On radio button click, show/hid divs with dynamicaly changed IDs or classes

<div class="">
#foreach($result->package as $package) //listing all packages from DB using Laravel's Blade template
<input id="id_radio{{$package->id}}" type="radio" value="{{$package->id}}" name="radio"
>{{$package->name}} <br>
<div class="" id="package{{$package->id}}">
#foreach($package->price_option as $price_option)
Price Option: <input type="radio" value="{{$price_option->id}}"
name="radio">{{$price_option->id}} <br>
<div class="">
#foreach($price_option->values as $value)
Values: {{$value->value}} <br>
#endforeach
</div>
#endforeach
</div>
#endforeach
</div>
Page Source:
<div class="">
<input id="id_radio22" type="radio" value="22" name="radio"
>Package 1 <br>
<div class="" id="package22">
Price Option: <input type="radio" value="75"
name="radio">75 <br>
<div class="">
Values: Dummy text <br>
Values: Dummy text 2 <br>
</div>
Price Option: <input type="radio" value="78"
name="radio">78 <br>
<div class="">
Values: Dummy text <br>
Values: Dummy text 2 <br>
</div>
</div>
<input id="id_radio23" type="radio" value="23" name="radio"
>Package 2 <br>
<div class="" id="package23">
Price Option: <input type="radio" value="76"
name="radio">76 <br>
<div class="">
Values: a <br>
Values: b <br>
Values: c <br>
</div>
</div>
</div>
What I need is to show all price options as radio buttons when I click on, for example, package 1 radio button, and to show all price options as radio buttons for package2 but at the same time hide price options of Package1.
Then for all Price Options that I click to show all Values that belongs to that Price Option.
Currently dont have any CSS or JQuery/JavaScript code

Working fiddle.
Try to hide all the divs (that have id start with package) bellong to the other radio buttons then show just the div belong to the clicked one :
$('div[id^="package"]').hide();
$('body').on('click','input[id^="id_radio"]',function(){
$('div[id^="package"]').hide();
$('#package'+$(this).val()).show();
});
$('div[id^="price_option_div"]').hide();
$('body').on('click','.price_option',function(){
$('div[id^="price_option_div_"]').hide();
$("#price_option_div_"+$(this).val()).show();
});
Hope this helps.

How to dynamically display form fields when a radio button is clicked this way

I have three radio button choices for a question on a form. I want to achieve this effect with jquery: Based on which radio button was clicked, I want to show its associated form fields which are required for that radio button selection.
HTML:
<div class="ss-form-question errorbox-good" role="listitem">
<div dir="ltr" class="ss-item ss-item-required ss-radio">
<div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_594986466">
<div class="ss-q-title">Are you doing this for major requirements or class credit?
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
<span class="ss-required-asterisk" aria-hidden="true">*</span>
</div>
<div class="ss-q-help ss-secondary-text" dir="ltr"></div>
</label>
<ul class="ss-choices" role="radiogroup" aria-label="Are you doing this for major requirements or class credit? ">
<li class="ss-choice-item">
<label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="Major requirements" id="group_817382212_1" role="radio" class="ss-q-radio" aria-label="Major requirements" required="" aria-required="true"></span>
<span class="ss-choice-label">Major requirements</span>
</label>
</li>
<li class="ss-choice-item">
<label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="Class credit" id="group_817382212_2" role="radio" class="ss-q-radio" aria-label="Class credit" required="" aria-required="true"></span>
<span class="ss-choice-label">Class credit</span>
</label>
</li>
<li class="ss-choice-item">
<label><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="majorreq" value="neither, just want to help out!" id="group_817382212_3" role="radio" class="ss-q-radio" aria-label="neither, just want to help out!" required="" aria-required="true"></span>
<span class="ss-choice-label">neither, just want to help out!</span>
</label>
</li>
</ul>
<div id="majorreq_require" style="display:none;color:rgb(196,59,29);">This is a required question</div>
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" id="classnametoggle">
<div dir="ltr" class="ss-item ss-text">
<div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_2016813698">
<div class="ss-q-title">If for class credit, which class is it for?</div>
<div class="ss-q-help ss-secondary-text" dir="ltr">ex HDFS 395C</div>
</label>
<input type="text" name="whichclass" value="" class="ss-q-short" id="whichclass_input" dir="auto" aria-label="If for class credit, what class is it for? ex HDFS 395C Must contain " pattern=".*.*" title="Must contain ">
<div id="whichclass_require" style="display:none;color:rgb(196,59,29);">This is a required question</div>
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" id="classhourstoggle">
<div dir="ltr" class="ss-item ss-text">
<div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1438442595">
<div class="ss-q-title">And how many hours are required?</div>
<div class="ss-q-help ss-secondary-text" dir="ltr">enter only numbers</div>
</label>
<input type="number" name="classhours" value="" class="ss-q-short" id="classhours_input" dir="auto" aria-label="How many hours are required for you to complete? State it in numbers Must be a number greater than 0" step="any" title="Must be a number greater than 0">
<div id="classhours_valid" style="display:none;color:rgb(196,59,29);">Please enter a number</div>
<div id="classhours_require" style="display:none;color:rgb(196,59,29);">This is a required question</div>
</div>
</div>
</div>
The three radio button choices have an id equal to "majorreq". If the radio button for "Class credit" is selected then it should show the fields with div id's of "classnametoggle" and "classhourstoggle". It should hide these fields when the page initially loads.
How can I do this? I have searched far and wide on google but I am very confused as I am only a beginner to javascript programming. Any help would be greatly appreciated.

I think this is what you want, try put this into your js section script, hope this helpes.
Explanation
- When radio button(Class credit) was clicked, then the div with id classnameotggle and classhourstoggle should appear, right?
<script>
$(document).ready(function(){
$('#classhourstoggle, #classnametoggle').hide();
$('input[type=radio]').on('click', function(){
var radio_value = $(this).val();
if(radio_value=="Class credit")
{
$('#classhourstoggle, #classnametoggle').show();
}
else
{
$('#classhourstoggle, #classnametoggle').hide();
}
});
});
</script>

Try something like this:
$(".radio").on("click", function() {
var target = $(this).data("target");
$(".form-group").hide().filter("[data-target=" + target + "]").show();
});
.form-group {
display: none;
}
<form>
<input type="radio" class="radio" data-target="form1" />
<input type="radio" class="radio" data-target="form2" />
<input type="radio" class="radio" data-target="form3" />
<div class="form-group" data-target="form1">
</div>
<div class="form-group" data-target="form2">
</div>
<div class="form-group" data-target="form3">
</div>
</form>
Basically what you are doing is using the data attribute as a way to manage the relationship between radio button and DOM content. When you click a radio button, it hides all of the forms, only showing the relevant one.
You just need to add data attributes (like I have) or classes on your radio buttons and the wrappers around their related forms.

Getting a URL to decide value of a checkbox

I have looked around and not found anything too useful as to how I can do this, so sorry if it's a repeat question.
I am trying to get it so if a user clicks a certain link, they will be sent to a page with a checkbox pre-checked.
For example, I have 3 categories
PSHE, Food and EHWB.
I have a page that has all post's with these categories on but with filters that only show the categories selected.
I want to have 3 links on the homepage, that if clicked, load the page with the checkbox of the corresponding link pre-checked.
What's the best way to do this?
All I haven't found so far is this:
$('input[type=checkbox').click(function(){
window.location.hash = $(this).val();
});
This add's the value of the checkbox to the URL when clicked, i'm not sure if this is a stating point but any help would be appreciated. Thanks.
EDIT:
Here is my HTML as requested.
<fieldset id="filters" class="form__section form__section--group form__section--categories">
<legend class="form__section__title">
<h2 class="form__section__title__text">Filter by category:</h2>
</legend>
<div class="form__item form__item--boolean form__item--checkbox">
<button type="button" value=".all" id="checkAll">All</button>
</div><!--/form__item-->
<div class="form__item form__item--boolean form__item--checkbox">
<input type="checkbox" name="ff-checkbox category-what-food" value=".category-what-food" id="category-what-food ff-checkbox-1" class="checkbox1" /><label for="category-what-food ff-checkbox-1">Food</label>
</div><!--/form__item-->
<div class="form__item form__item--boolean form__item--checkbox">
<input type="checkbox" name="ff-checkbox category-what-pshe" value=".category-what-pshe" id="category-what-pshe ff-checkbox-2" class="checkbox1" /><label for="category-what-pshe ff-checkbox-2">PSHE</label>
</div><!--/form__item-->
<div class="form__item form__item--boolean form__item--checkbox">
<input type="checkbox" name="ff-checkbox category-what-sex-education" value=".category-what-sex-education" id="category-what-sex-education ff-checkbox-3" class="checkbox1" /><label for="category-what-sex-education ff-checkbox-3">Sex Education</label>
</div><!--/form__item-->
<div class="form__item form__item--boolean form__item--checkbox">
<input type="checkbox" name="ff-checkbox category-what-physical-education" value=".category-what-physical-education" id="category-what-physical-education ff-checkbox-4" class="checkbox1" /><label for="category-what-physical-education ff-checkbox-4">Physical Education</label>
</div><!--/form__item-->
<div class="form__item form__item--boolean form__item--checkbox">
<input type="checkbox" name="ff-checkbox category-what-ehwb" value=".category-what-ehwb" id="category-what-ehwb ff-checkbox-5" class="checkbox1" /><label for="category-what-ehwb ff-checkbox-5">EHWB</label>
</div><!--/form__item-->
<div class="form__item form__item--boolean form__item--checkbox">
<input type="checkbox" name="ff-checkbox category-what-environment" value=".category-what-environment" id="category-what-environment ff-checkbox-6" class="checkbox1" /><label for="category-what-environment ff-checkbox-6">Environment</label>
</div><!--/form__item-->
<div class="form__item form__item--boolean form__item--checkbox">
<input type="checkbox" name="ff-checkbox category-what-policies" value=".category-what-policies" id="category-what-policies ff-checkbox-7" class="checkbox1" /><label for="category-what-policies ff-checkbox-7">Policies</label>
</div><!--/form__item-->
<div class="form__item form__item--boolean form__item--checkbox">
<input type="checkbox" name="ff-checkbox category-what-governors" value=".category-what-governors" id="category-what-governors ff-checkbox-8" class="checkbox1" /><label for="category-what-governors ff-checkbox-8">Governors</label>
</div><!--/form__item-->
</fieldset><!--/form__group-->

Yes Harry, your appoach is correct. Instead of assigning the checkbox value to location hash. write conditional statements to assign the required url itself to open
$('input[type=checkbox]').click(function() {
var x = $(this).val();
if (x == "cond 1") {
window.open("url1", "_self");
} else if (x == "cond2") {
window.open("url2", "_self"); //and so on
}
});
Hope it helps..

Changing classes on multiple divs when selecting specific radio buttons

Hey everyone I got a javascript problem I can't seem to find a specific solution for on the web. What I want to be able to do is select one of the radio buttons and have that change the class of #home-right to either .rackmount or .shipping and add the class of .displaynone to the type of dimensions I don't want shown.
<div id="home-right" class="rackmount">
<h4 class="helvneuebcn">Case Finder</h4>
<div class="cta-options">
<input type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>
<input type="radio" value="Rackmount Enclosures" name=""> Rackmount Enclosures<br/>
</div>
<div class="shipping-dimensions displaynone">
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">H x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">W x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">L</span></div>
</div>
<div class="rackmount-dimensions">
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">U Height x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">Rack Depth</span></div>
</div>
<div class="clear"></div>
<input type="button" value="Submit" class="findcase">
</div>

Use a onClick handler on your radio buttons to do your stuff. Example:
<input onCLick="..." type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>
Also use jQuery if you ain't already - it will save you some time and its very easy to do this kind of functionality.