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>
Related
i'm using Uikit radio input (https://altair-html.tzdthemes.com/forms_regular.html).
The problem is the radio input is transforming between code and on site display
After load my form with Ajax, i want to alert value for radio choice after each change.
Here my code :
HTML :
<div class="uk-width-medium-1-2">
<h5>Radio set 1</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_1" value="Yes" data-md-icheck />
<label for="radio_opt_1" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_2" value="Non" data-md-icheck />
<label for="radio_opt_2" class="inline-label">No</label>
</span>
</div>
</div>
<div class="uk-width-medium-1-2">
<h5>Radio set 2</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_3" value="Yes" data-md-icheck />
<label for="radio_opt_3" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_4" value="Non" data-md-icheck />
<label for="radio_opt_4" class="inline-label">No</label>
</span>
</div>
</div>
Then here my JS (doesnt' work)
$(document).on('change', 'input:radio', function () {
alert('test');
});
That theme is using iCheck and according to the docs you should use:
$('input:radio').on('ifChecked', function(event) {
alert('test');
});
i have a page which contains a radio box , and where , items are identified by their diffrent numric ids ; i'm recupering the id of the item that should be clicked from another job , and i wanna force the click of that specific item :
This is my HTML page :
<div id="radioCategories" class="select-list__content toggle-box" id="toggle-list-categories">
<label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer">
<input class="filtres" name="categorieFiltre" type="radio" id="1">
<span class="check"></span>
<span class="checkbox-title" data-match-forcontent="name"></span>
<span>(<span data-match-forcontent="nbMission"></span>)</span>
</label>
<label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer">
<input class="filtres" name="categorieFiltre" type="radio" id="2">
<span class="check"></span>
<span class="checkbox-title" data-match-forcontent="name"></span>
<span>(<span data-match-forcontent="nbMission"></span>)</span>
</label>
<label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer">
<input class="filtres" name="categorieFiltre" type="radio" id="3">
<span class="check"></span>
<span class="checkbox-title" data-match-forcontent="name"></span>
<span>(<span data-match-forcontent="nbMission"></span>)</span>
</label>
</div>
As you can see , i have the labels (itmes ) with the ids : 1,2,3
i have a function which is loadin dynamically the id which must be checked :
if (GetParams("cat_id")) {
var id_cat = GetParams("cat_id"); // can be 1 or 2 or 3
}
i wann develop a function which catch that "id_cat" and force the click (the event & the appearence ) on the item of the specific id received
so i started
by that :
checkSelectedCategory: function(id_cat) {
if (id) {
$("#radioCategories input:radio").attr(id, id_cat).click(function() {
alert("clicked");
});
$("input:radio:first").prop("checked", true).trigger("click");
}
}
But it didn't work , any suggestions ?
attach the event on radio buttons like this
$("#radioCategories input[type='radio']").click(function() {
alert("clicked");
});
then in the checkSelectedCategory method trigger the event like this
checkSelectedCategory:function (id_cat) {
if (id_cat){
$("input#"+id_cat).trigger("click");
}
}
Do you actually need to click it? Or just select it with JS?
var id_cat = 2;
var id = '#' + id_cat;
// Simply select it.
$( id ).prop( 'checked', true );
// Or, select it by click.
$( id ).trigger( 'click' );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
1
<input type="radio" id="1">
</label>
<label>
2
<input type="radio" id="2">
</label>
<label>
3
<input type="radio" id="3">
</label>
Please remove "checkSelectedCategory" function and add following code in if condition.
if (GetParams("cat_id")) {
var id_cat = GetParams("cat_id"); // can be 1 or 2 or 3
var _this = $("#"+id_cat);
_this.prop("checked", true);
_this.trigger("click");
}
Please check below snippet. Whichever value will be entered from 1,2,3 that radio button will be checked and click event also trigger on it onchange event of input type="text".
$(document).ready(function(){
$("#dynamic_cat").on('change',function(){
var id_cat = $(this).val();
if (id_cat) {
var _this = $("#"+id_cat);
_this.prop("checked", true);
_this.trigger("click");
}
});
$("input[type='radio']").click(function(){
alert("clicked");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="textbox" id="dynamic_cat" value=""/><br/>
<div id="radioCategories" class="select-list__content toggle-box" id="toggle-list-categories">
<label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer">
<input class="filtres" name="categorieFiltre" type="radio" id="1">
<span class="check"></span>
<span class="checkbox-title" data-match-forcontent="name"></span>
<span>(<span data-match-forcontent="nbMission"></span>)</span>
</label>
<label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer">
<input class="filtres" name="categorieFiltre" type="radio" id="2">
<span class="check"></span>
<span class="checkbox-title" data-match-forcontent="name"></span>
<span>(<span data-match-forcontent="nbMission"></span>)</span>
</label>
<label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer">
<input class="filtres" name="categorieFiltre" type="radio" id="3">
<span class="check"></span>
<span class="checkbox-title" data-match-forcontent="name"></span>
<span>(<span data-match-forcontent="nbMission"></span>)</span>
</label>
</div>
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.
I am stuck at a place in Javascript/Jquery calculation.
Please take a look at the link:
http://thectiweb.com/booknow_new/
When the different option in the first row and second is selected, I need to show different values based upon those selection. Here is what I came up with.
<div class="row-fluid service">
<h3>step 1: Select Your Service*</h3>
<input id="proc1" type="radio" name="proc" value="120"><label for="proc1"><img src="img/simply.png" width="160"><br></label>
<input id="proc2" type="radio" name="proc" value="150"><label for="proc2"><img src="img/pristine.png" width="160"><br></label>
<input id="proc3" type="radio" name="proc" value=""><label for="proc3"><img src="img/custom.png" width="160"><br></label>
<div style="padding-bottom: 24px;" class="pop" id="pop">
<div class="popover fade right in" style="top: 137.5px; left: 861.033px; display: block;"><div class="arrow"></div><div class="popover-content error">CustomFitTM service must be quoted individually. A representative will contact you for pricing upon form submission</div></div>
</div>
</div>
<div class="clearfix"></div>
<div class=" row-fluid beds">
<h3>numbers of bedrooms</h3>
<input id="beds1" type="radio" name="beds" value="10"><label for="beds1"><img src="img/1.png"><br><small>one bedroom</small></label>
<input id="beds2" type="radio" name="beds" value="20"><label for="beds2"><img src="img/2.png"><br><small>two bedroom</small></label>
<input id="beds3" type="radio" name="beds" value="30"><label for="beds3"><img src="img/3.png"><br><small>three bedroom</small></label>
<input id="beds4" type="radio" name="beds" value="40"><label for="beds4"><img src="img/4.png"><br><small>four bedroom</small></label>
<input id="beds5" type="radio" name="beds" value="50"><label for="beds5"><img src="img/5.png"><br><small>five bedroom</small></label>
</div>
For input style "text", I have a javascript function such as:
document.getElementById("dds1").onkeyup = function() {
updateIt();
};
Now, what if I had a checkbox? What would the code look like? What about for radio buttons? What would I use to get values (for the checkbox, either checked or not checked. and for the radio buttons, I'd like to get which button is clicked).
Here is code for the radio button:
<li id="foli517" class=" ">
<label class="desc" id="shippingChoice" for="Field517_0">
Shipping Options
</label>
<div>
<input id="shippingChoice" name="Field517" type="hidden" value="" />
<span>
<input id="shipping1" name="Field517" type="radio" class="field radio" value="$2.00 Shipping Fee" tabindex="13" checked="checked" />
<label class="choice" for="Field517_0" >
$2.00 Shipping Fee</label>
</span>
<span>
<input id="Field517_1" name="Field517" type="radio" class="field radio" value="I will pick up the items (free shipping)" tabindex="14" />
<label class="choice" for="Field517_1" >
I will pick up the items (free shipping)</label>
</span>
</div>
</li>
For the checkbox:
document.getElementById("checkBox").onclick = function() {
var isChecked = this.checked;
//whatever
};
For the radio button:
document.getElementById("radioButton").onclick = function() {
var clickedId = this.id;
//whatever
};