Having Issue on Targeting Input with Complex Name [duplicate] - javascript

This question already has answers here:
Escape square brackets when assigning a class name to an element
(4 answers)
Closed 5 years ago.
I have a set of checkboxes like this
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
generated by WordPress API now I need to select the chech box by it's name attribute like following but I am getting this error
Syntax error, unrecognized expression:
input:checkbox[name=tax_input[apptax][]]
can you please let me know how to fix this
$('input:radio[name=r3]').on('change', function() {
$('input:checkbox[name=tax_input[apptax][]]').removeAttr('checked');
console.log('changes happend')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="" data-wp-lists="list:" class=" form-no-clear">
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
<li id="apptax-17">
<label class="selectit">
<input value="17" type="checkbox" name="tax_input[apptax][]" id="in-apptax-17"> Maybe</label>
</li>
<li id="apptax-16">
<label class="selectit">
<input value="16" type="checkbox" name="tax_input[apptax][]" id="in-apptax-16"> Yes</label>
</li>
</ul>
<div class="panel-body">
<label class="checkboxer">
<input type="radio" name="r3" value="15"> No</label>
<label class="checkboxer">
<input type="radio" name="r3" value="17"> Maybe</label>
<label class="checkboxer">
<input type="radio" name="r3" value="16"> Yes</label>
</div>

You need to escape the brackets like this:
$('input:checkbox[name=tax_input\\[apptax\\]\\[\\]]').removeAttr('checked');
See working jsfiddle:
https://jsfiddle.net/8hw051vu/

You can just enclosed the name by "" like $('input:checkbox[name="tax_input[apptax][]"]')
$(document).ready(function(){
$('input:checkbox[name="tax_input[apptax][]"]').removeAttr('checked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15" checked/> No

Some characters simply won't work well on css selectors. If you can't avoid using them, then use an id if it's an unique element or create a class if they are expected to be many.
If you are in a hurry use #Ingal S. solution

Select the checkbox by the value of radio button to value of checkbox.
$('input:radio[name=r3]').on('change', function() {
var value = $(this).val()
$('input:checkbox[value='+value+']').removeAttr('checked');
console.log('changes happend')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="" data-wp-lists="list:" class=" form-no-clear">
<li id="apptax-15">
<label class="selectit">
<input value="15" type="checkbox" name="tax_input[apptax][]" id="in-apptax-15"> No</label>
</li>
<li id="apptax-17">
<label class="selectit">
<input value="17" type="checkbox" name="tax_input[apptax][]" id="in-apptax-17"> Maybe</label>
</li>
<li id="apptax-16">
<label class="selectit">
<input value="16" type="checkbox" name="tax_input[apptax][]" id="in-apptax-16"> Yes</label>
</li>
</ul>
<div class="panel-body">
<label class="checkboxer">
<input type="radio" name="r3" value="15"> No</label>
<label class="checkboxer">
<input type="radio" name="r3" value="17"> Maybe</label>
<label class="checkboxer">
<input type="radio" name="r3" value="16"> Yes</label>
</div>

Related

I need some help on validating the below code in javascript

I would like to validate the below code in js so that the user has to check one but i do not know how to. The form name is 'registration'
<li>
<input type="checkbox" name="en" value="en" />
<span>English</span>
</li>
<li>
<input type="checkbox" name="nonen" value="noen" />
<span>Non English</span>
</li>
Use an input of type radio instead.
Here is a link to the MDN documentation, basically all inputs of type radio that have the same name property are grouped together and the user can select only one of them.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
You could try this one
<input type="radio" name="raden" id="english" checked>
<label for="english">English</label>
<input type="radio" name="radnon" id="nonenglish">
<label for="nonenglish">Non-English</label>
<li><input type="checkbox" name="en" value="en" /><span>English</span></li>
<li><input type="checkbox" name="en" value="en" /><span>Non English</span></li>
In check box name must be same if all check boxes are selected. Try thid code.
<li>
<input type="radio" name="nonen" value="en" checked/>
<span>English</span>
</li>
<li>
<input type="radio" name="nonen" value="noen"/>
<span>Non English</span>
<li>
<input type="radio" name="nonen" value="en" checked/>
<span>English</span>
</li>
<li>
<input type="radio" name="nonen" value="noen"/>
<span>Non English</span>

How to get multiple nested values using JavaScript or jQuery?

On submitting a button I want to get the values of multiple checkboxes where each checkbox have radio buttons. I expect the output will be like if I check
checkbox One and select its corresponding radio button L, checkbox Two and select its corresponding radio button M, checkbox Three and select its corresponding radio button C and it is not mandatory to check all the checkboxes, one may leave some checkbox empty. I want to get the selected item and its corresponding values only.
var allCheckedItem = [];
$.each(jQuery("input[name='teeth']:checked"),
function(){ allCheckedItem.push($(this).val());
});
for (var i = 0; i < allCheckedItem.length; i++)
{
var eachItem = allCheckedItem[i];
console.log(eachItem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<ul>
<li>
<input name='teeth' type="checkbox" id="cb1" value="One" />One
<span class="teethproblem1">
<input name='a' type="radio" id="rb1" value="M" />M
<input name='a' type="radio" id="rb2" value="L" />L
<input name='a' type="radio" id="rb3" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb2" value="Two"/>Two
<span class="teethproblem2">
<input name='b' type="radio" id="rb4" value="M" />M
<input name='b' type="radio" id="rb5" value="L" />L
<input name='b' type="radio" id="rb6" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb3" value="Three"/>Three
<span class="teethproblem3">
<input name='c' type="radio" id="rb7" value="M" />M
<input name='c' type="radio" id="rb8" value="L" />L
<input name='c' type="radio" id="rb9" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb4" value="Four"/>Four
<span class="teethproblem4">
<input name='d' type="radio" id="rb10" value="M" />M
<input name='d' type="radio" id="rb11" value="L" />L
<input name='d' type="radio" id="rb12" value="C" />C
</span>
</li>
<li><input type="submit" name="submit" value="SAVE"></li>
</ul>
</form>
I expect the output should be: One -> M , Two -> C , Three -> L
Here is another variation on the theme:
const getvals=()=>{var coll={};
$(':radio:checked')
.each((i,rb)=>
$(rb).closest('li')
.find(':checkbox:checked')
.each((j,cb)=>coll[cb.value]=rb.value)
)
console.log(coll);
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<ul>
<li>
<input name='teeth' type="checkbox" id="cb1" value="One" />One
<span class="teethproblem1">
<input name='a' type="radio" id="rb1" value="M" />M
<input name='a' type="radio" id="rb2" value="L" />L
<input name='a' type="radio" id="rb3" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb2" value="Two"/>Two
<span class="teethproblem2">
<input name='b' type="radio" id="rb4" value="M" />M
<input name='b' type="radio" id="rb5" value="L" />L
<input name='b' type="radio" id="rb6" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb3" value="Three"/>Three
<span class="teethproblem3">
<input name='c' type="radio" id="rb7" value="M" />M
<input name='c' type="radio" id="rb8" value="L" />L
<input name='c' type="radio" id="rb9" value="C" />C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb4" value="Four"/>Four
<span class="teethproblem4">
<input name='d' type="radio" id="rb10" value="M" />M
<input name='d' type="radio" id="rb11" value="L" />L
<input name='d' type="radio" id="rb12" value="C" />C
</span>
</li>
<li><input type="button" onclick="getvals()" value="SAVE"></li>
</ul>
</form>
Highly Recommended Reading: Decoupling Your HTML, CSS, and JavaScript.
One of the biggest problems you'll run into, is example code that only works with the current html. If you decide to change that html in just about any way, your code stops working (aka software brittleness). The following code extensible (meaning adding more checkboxes/radios will be easy to add, probably requiring no code changes), and should be easy to understand. Removing li or adding more html won't cause this code to stop working because it doesn't rely on html structure.
$(document).ready(function() {
$('.js-save').on('click', function(e) {
var $btn = $(e.currentTarget);
var $form = $btn.closest('form');
var $pre = $('.debug');
$pre.text('');
$form.find('input:not(".ignore-value")').each(function(_,input) {
var $input = $(input);
var value = $input.val();
if ($input.is('[type=checkbox]')) {
value = $input.prop('checked');
}
var name = $input.prop('name');
$pre.append('name: ' + name + ':' + value + '\n');
if ($input.hasClass('js-associate-value') && value) {
var associatedValue = $($input.data('target')).val();
if (associatedValue) {
$pre.append(' - ' + associatedValue + '\n');
}
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
<ul>
<li>
<input name='teeth' type="checkbox" id="cb1" value="One" class="js-associate-value" data-target="input[name=d]:checked"/>One
<span class="teethproblem1">
<input name='a' type="radio" id="rb1" value="M" class="ignore-value"/>M
<input name='a' type="radio" id="rb2" value="L" class="ignore-value"/>L
<input name='a' type="radio" id="rb3" value="C" class="ignore-value"/>C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb2" value="Two" class="js-associate-value" data-target="input[name=d]:checked"/>Two
<span class="teethproblem2">
<input name='b' type="radio" id="rb4" value="M" class="ignore-value"/>M
<input name='b' type="radio" id="rb5" value="L" class="ignore-value"/>L
<input name='b' type="radio" id="rb6" value="C" class="ignore-value"/>C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb3" value="Three" class="js-associate-value" data-target="input[name=c]:checked"/>Three
<span class="teethproblem3">
<input name='c' type="radio" id="rb7" value="M" class="ignore-value"/>M
<input name='c' type="radio" id="rb8" value="L" class="ignore-value"/>L
<input name='c' type="radio" id="rb9" value="C" class="ignore-value"/>C
</span>
</li>
<li>
<input name='teeth' type="checkbox" id="cb4" value="Four" class="js-associate-value" data-target="input[name=d]:checked"/>Four
<span class="teethproblem4">
<input name='d' type="radio" id="rb10" value="M" class="ignore-value" />M
<input name='d' type="radio" id="rb11" value="L" class="ignore-value" />L
<input name='d' type="radio" id="rb12" value="C" class="ignore-value" />C
</span>
</li>
<li><input class="js-save" type="button" name="submit" value="SAVE"></li>
</ul>
</form>
<pre class='debug'></pre>

nest radio button selection - javascript

I am working on my personal site and I am trying to nest my radio buttons.
I know I am supposed to have javascript running to do what I need it to do but I cant get a clear answer. What I am trying to do is as follows.
Options number 2 and 6 both have sub options to go with them. But I want that if i select 1 or 3-5 or 7 then the user cannot select any of the subs. and if the user selects a sub by mistake and tries to select one of the aforementioned numbers then it will clear the sub selection. please help. Or at lease can some one point me in the right direction? thanks so much.
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<label class="five six">Section</label>
<div class="seven">
<label class="ten">
<input value="option_1" name="radios" type="radio" />
option 1</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_2" name="radios" type="radio" />
option 2</label>
<br>
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="eight">
<label class="nine">
<input type="radio" name="inline radio" value="sub_1">
Sub 1</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_2">
Sub 2</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_3">
Sub 3</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="seven">
<label class="ten">
<input value="option_3" name="radios" type="radio" />
option 3</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_4" name="radios" type="radio" />
option 4</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_5" name="radios" type="radio" />
option 5</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_6" name="radios" type="radio" />
option 6</label>
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="eight">
<label class="nine">
<input type="radio" name="inline radio" value="sub_1">
Sub 1</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_2">
Sub 2</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="seven">
<label class="ten">
<input value="option_7" name="radios" type="radio" />
option 7</label>
</div>
</div>
</div>
</div>
</div>
Here's a little something using Jquery that might work if I understood your requirements correctly. The HTML is a dumbed down version of yours just to demonstrate the script.
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$("input[type=radio]").on("change",function(){
if($(this).hasClass("two") || $(this).hasClass("six") || $(this).hasClass("sub"))
$(".sub").removeAttr("disabled");
else
$(".sub").attr("checked",false).attr("disabled","disabled");
});
});
</script>
</head>
<body>
<form>
<input type=radio name="lvl1" class="one" value=""> Option 1<br>
<input type=radio name="lvl1" class="two" value=""> Option 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 3<br>
<input type=radio name="lvl1" class="three" value=""> Option 3<br>
<input type=radio name="lvl1" class="four" value=""> Option 4<br>
<input type=radio name="lvl1" class="five" value=""> Option 5<br>
<input type=radio name="lvl1" class="six" value=""> Option 6<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 2<br>
<input type=radio name="lvl1" class="seven" value=""> Option 7<br>
</form>
</body>
</html>
Here's the fiddle to check online: https://jsfiddle.net/bds87fjt/
The same solution as above using pure Javascript:-
<!doctype html>
<html>
<head>
<script>
function disableSub(){
sub = document.querySelectorAll(".sub");
for(i=0; i<sub.length; i++){
sub[i].checked=false;
sub[i].disabled=true;
}
}
function enableSub(){
sub = document.querySelectorAll(".sub");
for(i=0; i<sub.length; i++){
sub[i].disabled=false;
}
}
</script>
</head>
<body>
<form>
<input type=radio name="lvl1" onclick=disableSub(); class="one" value=""> Option 1<br>
<input type=radio name="lvl1" onclick=enableSub(); class="two" value=""> Option 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 3<br>
<input type=radio name="lvl1" onclick=disableSub(); class="three" value=""> Option 3<br>
<input type=radio name="lvl1" onclick=disableSub(); class="four" value=""> Option 4<br>
<input type=radio name="lvl1" onclick=disableSub(); class="five" value=""> Option 5<br>
<input type=radio name="lvl1" onclick=enableSub(); class="six" value=""> Option 6<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 2<br>
<input type=radio name="lvl1" onclick=disableSub(); class="seven" value=""> Option 7<br>
</form>
</body>
</html>
Here's the fiddle for above: https://jsfiddle.net/0omtop0t/
And here's another neat little solution using just HTML and CSS: http://jsfiddle.net/NhXUV/
Not sure, it'll work in your case though. Worth checking out.
I'd definitely go with JavaScript for this one.
Basically, you could write a function that would be called whenever a radio button from a div of the class, lets call it gotNestedStuff, has his selection changed. The toggle will show/hide the div with the class nestedStuff that contains the sub-options that can only be selected if the main option is.
Here's the basic function (with jQuery):
<script type="text/javascript">
//let's hide the nested stuff on page load
$(document).ready(function() {
$('.nestedStuff').hide();
});
//on click on an element that has class "gotNestedStuff", show it's hidden content
$('.gotNestedStuff .option').on('change', function(e) {
console.log($(e.relatedTarget));
$(e.target).parent('.gotNestedStuff').children('.nestedStuff').toggle();
});
</script>
Working with this HTML for example :
<div>
<div class="optionContainer">
<input class="option" type="radio" name="option" value="1">Option 1
</div>
<div class="optionContainer gotNestedStuff">
<input class="option" type="radio" name="option" value="2">Option 2<br>
<div class="optionContainer nestedStuff">
<input class="option" type="radio" name="option" value="2.1">Option 2.1<br>
<input class="option" type="radio" name="option" value="2.2">Option 2.2<br>
</div>
</div>
<div class="optionContainer">
<input class="option" type="radio" name="option" value="3">Option 3<br>
<div>
</div>
You could also call a function "onclick" from your element that would validate if an item with nested stuff hidden is selected, that it should show it to the user.
Ex. <input type="radio" onclick="myfunction()" />

check all function with outputting labels into a div

i have a group of check boxes and i want to use a check all function but only for the corresponding checkboxes for example if i click checkAll1 it will only highlight checkItem 1 but also will still allow me to check other check boxes.
you will see from the snippet below the code i currently have, i want to also be able to put the checkAll label when it comes out to the #check div to be in a p tag so i can style it.
hope this all makes sense
Many thanks
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can use value to call checkbox, Do something like this..
var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");
var chk3 = $("input[type='checkbox'][value='3']");
var chk4 = $("input[type='checkbox'][value='4']");
var chk5 = $("input[type='checkbox'][value='5']");
var chk6 = $("input[type='checkbox'][value='6']");
chk1.on('change', function(){
chk2.prop('checked',this.checked);
});
chk3.on('change', function(){
chk4.prop('checked',this.checked);
});
chk5.on('change', function(){
chk6.prop('checked',this.checked);
});
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + "<p></p>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1" value="1"><label for="checkAll1" >Check All</label>
<input type="checkbox" id="checkItem1" value="2"> <label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item 2</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item3</label>
<hr />
<input type="checkbox" id="checkAll2" value="3"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3" value="5"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3" value="6"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
I tweak your code a little, and what you mean by able to put the checkAll label when it comes out to the #check div which i did't get it, try this below code :
$("input[type='checkbox']").change(function() {
$("#checked").empty();
$("input[type='checkbox']:checked").each(function() {
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
$(".checkAll").click(function() {
if ( $(this).is(':checked') )
$(this).siblings(':checkbox').prop('checked', true);
else
$(this).siblings(':checkbox').prop('checked', false);
});
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll1" class="checkAll">
<label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll2" class="checkAll">
<label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll3" class="checkAll">
<label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item3</label>
</div>
<p>You have selected:</p>
<div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
p/s : like other said, id must be unique for elements
Assign a same class for the same row check boxes
Use the below jquery
$("#checkAll1").change(function(){
$(".checkItem1").prop("checked", true);
});
$("#checkAll2").change(function(){
$(".checkItem2").prop("checked", true);
});
$("#checkAll3").change(function(){
$(".checkItem3").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" class="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" class="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
let me know if it is helpful

Change innerhtml of label when radio button is checked

I want to add innerhtml to my label, when a radio button is checked.
By default the label does not have any value.
I want to change the value of the label based on the value of the radio button.
But I want to define my own value for this.
So the label for value 1 should be: "Label 1"
Label for value 2 should be "Label 2" etc.
I use this for star rating, so when a next radio button is checked, it should remove the value of the previous label.
This is my current html:
<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full" for="Degelijkheid-1-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full" for="Degelijkheid-2-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full" for="Degelijkheid-3-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full" for="Degelijkheid-4-5"></label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full" for="Degelijkheid-5-5"></label>
</span>
</li>
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[2]" id="Design-1-5" value="1" class="radio">
<label class="full" for="Design-1-5"></label>
<input type="radio" name="ratings[2]" id="Design-2-5" value="2" class="radio">
<label class="full" for="Design-2-5"></label>
<input type="radio" name="ratings[2]" id="Design-3-5" value="3" class="radio">
<label class="full" for="Design-3-5"></label>
<input type="radio" name="ratings[2]" id="Design-4-5" value="4" class="radio">
<label class="full" for="Design-4-5"></label>
<input type="radio" name="ratings[2]" id="Design-5-5" value="5" class="radio">
<label class="full" for="Design-5-5"></label>
</span>
</li>
</ul>
Try solution acc. to you.
You can combile "Label" as string to rvalue variable.
i.e var rvalue="Label"+$(this).attr('value');
like as:
$('.radio[name="rating[2]"]').change(function(){
var rvalue='';
if($(this).attr('value')=='1')
{
rvalue='Bad';
}
else if($(this).attr('value')=='5')
{
rvalue='Amazing';
}
$(this).parent('.ratingSelector').find('.full').html('');
$(this).next('label').html(rvalue);
});
Working example: http://jsfiddle.net/7wLbyn2c/4/
<input type="radio" onClick="getInnerHtml($(this))">
// call getInnerHtml function in all radio buttons and then write the function
function getInnerHtml(thisVal) {
alert(thisVal.innerHtml());
}
use the below code
<input type="radio" name = 'somename' onclick="getvalue(this)">
<script>
function getvalue(ref) {
alert(ref.value);
}
</script>
We are just passing the reference to this particular radio button as parameter in the onclick event function and then simply use .value attribute used in javascript. You can also use onchange event.
Edited
function getvalue(ref) {
for(i=ref.value;i<=5;i++)
{
$(this).next('label').appned(i);
}
}
Try this
$('input:radio').click(function() {
$('label').text('');
$(this).next('label').html('Label '+$(this).attr('value'));
});
http://jsfiddle.net/nm8ha2p9/1/
Well I did something with pure JS. I hope it helps you. It's on codepen. This are functions I used:
function setValue(obj)
{
if(obj.checked){
clearLabels();
var lbls = document.getElementsByTagName("LABEL");
var lbl = undefined;
for(var i=0;i<lbls.length; i++)
{
if(lbls[i].htmlFor == obj.id)
{
lbl = lbls[i];
break;
}
}
if(lbl != undefined){
lbl.innerHTML = obj.value;
}
}
}
function clearLabels()
{
var lbls = document.getElementsByTagName("LABEL");
for(var i=0;i<lbls.length;i++){
lbls[i].innerHTML="";
}
}
Using pure JS, no jQuery.
Labels are set in your HTML, so you can easily have whatever you want.
Labels use a class to hide them when not wanted.
Uses delegated event listener, listening for click to bubble.
[].forEach.call(document.querySelectorAll('.ratingSelector'), function (node) {
var labels = node.querySelectorAll('.full');
node.addEventListener('click', function (evt) {
var target = evt.target;
if (target.classList.contains('radio')) {
[].forEach.call(labels, function (label) {
label.classList.add('hidden');
});
evt.target.nextElementSibling.classList.remove('hidden');
}
}, false);
});
.hidden {
display:none
}
<ul class="rating">
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[1]" id="Degelijkheid-1-5" value="1" class="radio">
<label class="full hidden" for="Degelijkheid-1-5">Label 1</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-2-5" value="2" class="radio">
<label class="full hidden" for="Degelijkheid-2-5">Label 2</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-3-5" value="3" class="radio">
<label class="full hidden" for="Degelijkheid-3-5">Label 3</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-4-5" value="4" class="radio">
<label class="full hidden" for="Degelijkheid-4-5">Label 4</label>
<input type="radio" name="ratings[1]" id="Degelijkheid-5-5" value="5" class="radio">
<label class="full hidden" for="Degelijkheid-5-5">Label 5</label>
</span>
</li>
<li>
<span class="ratingSelector">
<input type="radio" name="ratings[2]" id="Design-1-5" value="1" class="radio">
<label class="full hidden" for="Design-1-5">Label 1</label>
<input type="radio" name="ratings[2]" id="Design-2-5" value="2" class="radio">
<label class="full hidden" for="Design-2-5">Label 2</label>
<input type="radio" name="ratings[2]" id="Design-3-5" value="3" class="radio">
<label class="full hidden" for="Design-3-5">Label 3</label>
<input type="radio" name="ratings[2]" id="Design-4-5" value="4" class="radio">
<label class="full hidden" for="Design-4-5">Label 4</label>
<input type="radio" name="ratings[2]" id="Design-5-5" value="5" class="radio">
<label class="full hidden" for="Design-5-5">Label 5</label>
</span>
</li>
</ul>

Categories