Develop Reference

Select odd checkboxes

Select odd check boxes please help me with the code
for(let i=0;i<8;i++){
if(i%2==1){
document.querySelector(“ul.todo-list > li:nth-child(i) input.toggle”).click()
}
}

You can use the li:nth-child(odd) then set the checked attribute to true for those selected checkboxes.
This is an example:
let elements = document.querySelectorAll('ul.todo-list > li:nth-child(odd) input[type="checkbox"]');
for(var i=0;i<elements.length;i++){
elements[i].checked = true;
}
<ul class="todo-list">
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
<li>
<input type="checkbox" />
</li>
</ul>

Find image inside a checkbox using jquery find()

I want to change the src attribute of images inside checkboxes based on if they are checked or not. The checking if checked works but the .attr("src") is always undefined.
How do i get the img inside the checkbox ?
cboxes.each(function() {
cb = $(this);
cbImg = cb.find("img");
if (cb.is(':checked')) {
alert(cbImg.attr("src")); //returns undefined
cbImg.attr("src", "css/img/checkbox_fylld.png");
} else {
cbImg.attr("src", "css/img/checkbox_ofylld.png");
}
});
And the HTML
<ul class="nav-justified">
<li>
<label>
<input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="0">
<img class="ageSelectImg" src="css/img/checkbox_ofylld.png" />
<br />0-2år</label>
</li>
<li>
<label>
<input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="2">
<img class="ageSelectImg" src="css/img/checkbox_ofylld.png" />
<br />2-10 år</label>
</li>
<li>
<label>
<input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="10">
<img class="ageSelectImg" src="css/img/checkbox_ofylld.png" />
<br />10+ år</label>
</li>
</ul>

$(document).ready(function(){
$('.ageSelect').each(function() {
cb = $(this);
cbImg = cb.next("img");
if (cb.attr('selected')) {
alert(cbImg.attr("src"));//returns undefined
cbImg.attr("src", "css/img/checkbox_fylld.png");
} else {
cbImg.attr("src", "css/img/checkbox_ofylld.png");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="nav-justified">
<li><label><input class="ageSelect" type="radio" selected id="timeSpan" name="timeSpan" value="0"> <img class="ageSelectImg" src="css/img/checkbox_ofylld.png" /><br />0-2år </label></li>
<li><label><input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="2"> <img class="ageSelectImg" src="css/img/checkbox_ofylld.png" /><br />2-10 år</label></li>
<li><label><input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="10"><img class="ageSelectImg" src="css/img/checkbox_ofylld.png" /><br />10+ år</label></li>
</ul>
You do not have any checkboxes. They are radio buttons.
However, here is the code:

Problem is your images are not inside your checkboxes. Checkbox inputs are self-closing tags (also you should terminate them with />).
Instead of .find("img") use .next("img").
One last important thing : you need to wrap your image handling inside an event listener:
$("input[name=\"timeSpan\"").on("change", function() {...});
so the code is executed every time a change is made to the radio input.
$("input[name=\"timeSpan\"").on("change", function() {
$("input[name=\"timeSpan\"").each(function() {
var cbImg = $(this).next("img");
if ($(this).is(':checked')) cbImg.attr("src", "http://www.clker.com/cliparts/8/8/c/0/1197121244407718078webmichl_powerbutton_2_states_%28_on_off_%29_1.svg.med.png");
else cbImg.attr("src", "https://www.windmobile.ca/images/default-source/icons/icons---koray/power-on-off.jpg");
});
});
.ageSelectImg {
height: 25px;
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-justified">
<li>
<label>
<input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="0" />
<img class="ageSelectImg" src="https://www.windmobile.ca/images/default-source/icons/icons---koray/power-on-off.jpg" />
<br />0-2år</label>
</li>
<li>
<label>
<input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="2" />
<img class="ageSelectImg" src="https://www.windmobile.ca/images/default-source/icons/icons---koray/power-on-off.jpg" />
<br />2-10 år</label>
</li>
<li>
<label>
<input class="ageSelect" type="radio" id="timeSpan" name="timeSpan" value="10" />
<img class="ageSelectImg" src="https://www.windmobile.ca/images/default-source/icons/icons---koray/power-on-off.jpg" />
<br />10+ år</label>
</li>
</ul>

Javascript generate recursive JSON object from nested UL LI check box

I have situation to generate JSON object as like below structure from nested UL LI checkbox when it is checked/uncheck.
<ul class="tree" id="tree">
<li><input type="checkbox" name="Team1" value="Team1" checked="checked">Team1 <!-- AND SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="one" value="Team1 child1" checked="checked">Team1 child1</li>
<li><input type="checkbox" name="two" value="Team1 child2">Team1 child2</li>
<li><input type="checkbox" name="three" value="Team1 child3" checked="checked">Team1 child3 <!-- SHOULD CHECK HERE -->
<ul>
<li><input type="checkbox" name="four" value="Team1 child3 - child1" checked="checked">Team1 child3 - child1</li>
<li><input type="checkbox" name="five" value="Team1 child3 - child2">Team1 child3 - child2</li> <!-- CHECK HERE -->
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" name="six" value="Team2">Team2</li>
<li><input type="checkbox" name="seven" value="Team3" checked="checked">Team3
<ul>
<li><input type="checkbox" name="eight" value="Team3 child1">Team3 child1</li>
<li><input type="checkbox" name="nine" value="Team3 child2" checked="checked">Team3 child2
<ul>
<li><input type="checkbox" name="ten" value="Team3 child2 - child1" checked="checked">Team3 child2 - child1</li>
<li><input type="checkbox" name="eleven" value="Team3 child2 - child2" checked="checked">Team3 child2 - child2</li>
</ul>
</li>
</ul>
</li>
</ul>
JSON Structure should be like below,
{
"Team" : [
{
"name" : "Team1",
"child" : [
{
"name" : "Team1 child1",
},
{
"name" : "Team1 child3",
"child" :[
{
"name" : "Team1 child3- child1",
}
]
}
]
},
{
"name" : "Team3",
"child" : [
{
"name" : "Team3 child2",
"child" :[
{
"name" : "Team3 child2- child1",
},
{
"name" : "Team3 child2- child2",
}
]
}
]
}
]
}
Tried with solution which is completely mess. Please advise for better solution.

You can do it with recursion
function createJSON($ul) {
return $ul
.children() // get all children (li)
.filter(function() { // filter li which have checked checkbox
return $(this).children(':checkbox')[0].checked; // get children checkbox is checked
})
.map(function() { // now generate array using map()
var obj1 = {};
obj1.name = $.trim($(this).contents().filter(function() { // get text content and trim to avoid spaces
return this.nodeType === 3 && $.trim(this.textContent).length > 0 // check text node and empty string
}).text());
var $ulc = $(this).children('ul'); // get inner children
if ($ulc.length > 0) // if it have children , use recursion and do the same
obj1.child = createJSON($ulc); // recursion
return obj1;
}).get(); // get the result array
}
$(':checkbox').change(function() {
$('#res').html(JSON.stringify(createJSON($('#tree')), null, 3))
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre id="res"></pre>
<ul class="tree" id="tree">
<li>
<input type="checkbox" name="account_settings" value="yes" checked="checked">Team1
<!-- AND SHOULD CHECK HERE -->
<ul>
<li>
<input type="checkbox" name="one" value="one" checked="checked">Team1 child1</li>
<li>
<input type="checkbox" name="two" value="two">Team1 child2</li>
<li>
<input type="checkbox" name="user_roles" value="user_roles">Team1 child3
<!-- SHOULD CHECK HERE -->
<ul>
<li>
<input type="checkbox" name="user_role" value="add" checked="checked">Team1 child3 - child1</li>
<li>
<input type="checkbox" name="user_role" value="delete">Team1 child3 - child2</li>
<!-- CHECK HERE -->
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="rl_module" value="yes">Team2</li>
<li>
<input type="checkbox" name="rl_module" value="yes" checked="checked">Team3
<ul>
<li>
<input type="checkbox" name="vat" value="yes">Team3 child1</li>
<li>
<input type="checkbox" name="bank_account" value="yes">Team3 child2
<ul>
<li>
<input type="checkbox" name="view" value="yes" checked="checked">Team3 child2 - child1</li>
<li>
<input type="checkbox" name="crud" value="yes" checked="checked">Team3 child2 - child2</li>
</ul>
</li>
</ul>
</li>
</ul>

How to add check box checked count value

i need to add the total number of check box checked count value in element.
But when i checked the check box in "heading 2" part , the count value was added in "heading 1" part .
I did not find the issue any one please guide me resolve this issue
DEMO
HTMl:
<div id="main">
<div class="a">
<div class="row">
<div class="col-md-12 cb_select_head">
<a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"><span class=
"glyphicon ecm-caret-down"></span></a><span class="labelBlock labelCounter">
<span class="count-checked-checkboxes">0</span></span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in" id="function-collapse">
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c1" name="cc" type="checkbox">
<label for="c1">asdas</label>
</li>
<li class="noArrow">
<input id="c2" name="cc" type="checkbox">
<label for="c2">asdasd</label>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c3" name="cc" type="checkbox">
<label for="c3">asdasd
</label>
<ul>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asd 1</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">sadas 2</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asdas 3</label></li>
</ul>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c4" name="cc" type="checkbox">
<label for="c4">asdasd</label>
</li>
<li class="noArrow">
<input id="c5" name="cc" type="checkbox">
<label for="c5">five</label>
</li>
</ul>
</div>
</div>
<!--First List End-->
<!--Second list start -->
<div class="a">
<div class="row">
<div class="col-md-12 cb_select_head">
<a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"><span class=
"glyphicon ecm-caret-down"></span></a><span class="labelBlock labelCounter">
<span class="count-checked-checkboxes">0</span></span>
<span class="fb_options_head">heading 2</span>
</div>
<ul class="sidebar fb-list-option collapse in" id="function-collapse">
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c1" name="cc" type="checkbox">
<label for="c1">asdas</label>
</li>
<li class="noArrow">
<input id="c2" name="cc" type="checkbox">
<label for="c2">asdasd</label>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c3" name="cc" type="checkbox">
<label for="c3">asdasd
</label>
<ul>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asd 1</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">sadas 2</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asdas 3</label></li>
</ul>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c4" name="cc" type="checkbox">
<label for="c4">asdasd</label>
</li>
<li class="noArrow">
<input id="c5" name="cc" type="checkbox">
<label for="c5">five</label>
</li>
</ul>
</div>
</div>
</div>
JS:
$(document).ready(function() {
var $checkboxes = $(
'#main ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('.count-checked-checkboxes').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes').val(
countCheckedCheckboxes);
});
});

see the working solution. Remember IDs needs to be unique, and avoid use of IDs whenever possible like putting input element inside the label instead of using with Id
$(document).ready(function() {
var $checkboxes1 = $('#head1 ul input[type="checkbox"]');
var $checkboxes2 = $('#head2 ul input[type="checkbox"]');
$checkboxes1.change(function() {
var countCheckedCheckboxes = $checkboxes1.filter(':checked').length;
$('#head1 .count-checked-checkboxes').text(countCheckedCheckboxes);
});
$checkboxes2.change(function() {
var countCheckedCheckboxes = $checkboxes2.filter(':checked').length;
$('#head2 .count-checked-checkboxes').text(countCheckedCheckboxes);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="head1">
<div class="row">
<div class="col-md-12 cb_select_head">
<span class="count-checked-checkboxes">0</span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in">
<li>
<label>
<input name="cc" type="checkbox">One
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">Two
</label>
</li>
<li>
<ul>
<li>
<label>
<input name="cc" type="checkbox">3 - a
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">3 -b
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">2 - c
</label>
</li>
</ul>
</li>
<li>
<label>
<input name="cc" type="checkbox">four
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">five
</label>
</li>
</ul>
</div>
</div>
<!--First List End-->
<!--Second list start -->
<div class="a" id="head2">
<div class="row">
<div class="col-md-12 cb_select_head">
<span class="count-checked-checkboxes">0</span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in">
<li>
<label>
<input name="cc" type="checkbox">One
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">Two
</label>
</li>
<li>
<ul>
<li>
<label>
<input name="cc" type="checkbox">3 - a
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">3 - b
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">2 - c
</label>
</li>
</ul>
</li>
<li>
<label>
<input name="cc" type="checkbox">four
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">five
</label>
</li>
</ul>
</div>
</div>
</div>

See if this works.
Ignoring everything others have mentioned, about ID's needing to be unique and what not, I was able to tally checked boxes for each heading using DOM traversal.
I changed the jQuery to:
$(document).ready(function() {
$('.a').each(function(){
var $checkboxes = $(this).find('input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
$(this).closest('.a').find('.count-checked-checkboxes').text(
countCheckedCheckboxes);
});
});
});
Loop through each element '.a'
Use $(this).find('input[type="checkbox"]'); to get just the relevant checkboxes
On change, traverse up the DOM until you find '.a', from there you can traverse down and find the heading class '.count-checked-checkboxes'
There's probably a better way to do this though.
.closest() starts at the current element and travels upwards looking for a match.
.find() travels downwards through descendants.

Couple things.
j08691 is right, IDs must be unique. The browser is getting the first #count-checked-checkboxes and filling that value.
Also, you are getting the count for all checkboxes which is going to tally all checkboxes regardless of which div they are in
I would suggest the following:
$(document).ready(function() {
var $checkboxes = $(
'.a ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('#count-checked-checkboxes-a').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes-a').val(
countCheckedCheckboxes);
});
});
But you are still getting all checkboxes. At which point I would change your second <div class="a"> to <div class="b"> and then duplicate the above statement like so:
$(document).ready(function() {
var $checkboxes = $(
'.b ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('#count-checked-checkboxes-b').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes-b').val(
countCheckedCheckboxes);
});
});
And of course change your IDs to match the ones in the jquery.
https://jsfiddle.net/gqcgwjq2/28/

Issue changing value into dynamic parent and child checkboxes

Here is the live demo updated
Problem: Trying to change value according dynamic checkboxes:
When I do click on the parent checkbox should change value="1" on childs
<input type="checkbox" class="parentCheckBox" value="1">
<input type="checkbox" class="childCheckBox" value="1">
<input type="checkbox" class="childCheckBox" value="1">
When I uncheck the parent should be value="0" on childs
<input type="checkbox" class="parentCheckBox" value="0">
<input type="checkbox" class="childCheckBox" value="0">
<input type="checkbox" class="childCheckBox" value="0">
Code:
<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<div>
<input type="checkbox" class="parentCheckBox" /> Parent 1 <a onclick="document.getElementById('div_1').style.display='';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/plus_add_green.png" height="20" width="20"></a> <a onclick="document.getElementById('div_1').style.display='none';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/minus_remove_green.png" height="20" width="20"></a><br />
<div id="div_1" style="display:none;">
<ul>
<li><input type="checkbox" class="childCheckBox" />Child 1-1 </li>
<li><input type="checkbox" class="childCheckBox" />Child 1-2 </li>
<li><input type="checkbox" class="childCheckBox" />Child 1-3 </li>
</ul>
</div>
</div>
<div>
<input type="checkbox" class="parentCheckBox" /> Parent 2 <a onclick="document.getElementById('div_2').style.display='';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/plus_add_green.png" height="20" width="20"></a> <a onclick="document.getElementById('div_2').style.display='none';return false;"><img src="https://cdn0.iconfinder.com/data/icons/ie_Bright/512/minus_remove_green.png" height="20" width="20"></a><br />
<div id="div_2" style="display:none;">
<ul>
<li><input type="checkbox" class="childCheckBox" />Child 2-1 </li>
<li><input type="checkbox" class="childCheckBox" />Child 2-2 </li>
<li><input type="checkbox" class="childCheckBox" />Child 2-3 </li>
</ul>
</div>
</div>
Script:
$(document).on('change', '.parentCheckBox', function() {
var that = $(this);
that.closest('div').find('.childCheckBox').prop('checked', that.is(':checked'));
$(this).val($(this).prop('checked')?1:0);
});
$(document).on('change', '.childCheckBox', function() {
var that = $(this);
var par = that.closest('ul');
var c = par.find('.childCheckBox').filter(':checked').length;
var parChk = par.closest('div').parent().find('.parentCheckBox');
var checked = c > 0;
$(this).val($(this).prop('checked')?1:0);
parChk.prop('checked', checked);
console.log(checked);
});

Adding the logic to update children value.
$(document).on('change', '.parentCheckBox', function() {
var that = $(this);
that.closest('div').find('.childCheckBox').prop('checked', that.is(':checked')).val(that.is(':checked')?1:0);
});
$(document).on('change', '.childCheckBox', function() {
var that = $(this);
$(this).val($(this).prop('checked') ? 1 : 0);
var par = that.closest('ul');
var c = par.find('.childCheckBox').filter(':checked').length;
var parChk = par.closest('div').parent().find('.parentCheckBox');
var checked = c > 0;
parChk.prop('checked', checked);
console.log(checked);
});

I am not 100% sure what you are trying to accomplish, but here are two pretty straight forward examples of what I think you are trying to do.
This is usually not how you use checkboxes. They have one value set, by default all checkboxes has the value 'on'. But you can use 1 or any other value as well. There is no need to change their value. If the checkbox is checked decides if it will post that value or not, if this was a form.
But, just to demonstrate how you can change the values based on change, I have two examples.
Simplified example:
HTML:
<ul>
<li><input type="checkbox" class="childCheckBox">Child 1-1 </li>
<li><input type="checkbox" class="childCheckBox">Child 1-2 </li>
<li><input type="checkbox" class="childCheckBox">Child 1-3 </li>
</ul>
JavaScript:
// When checkbox is changed
$('.childCheckBox').on('change', function(e){
// Check if its checked
if($(this).prop('checked')) {
// If checked, set value to 1
$(this).val(1);
} else {
// If not checked, set value to 0
$(this).val(0);
}
// Log value of changed checkbox
console.log($(this).val());
});
https://jsbin.com/mewefegopi/edit?html,js,output
Longer example with parents:
HTML:
<div class="wrapper">
<input type="checkbox" class="parentCheckBox" /> Parent 1
<ul>
<li><input type="checkbox" class="childCheckBox">Child 1-1 </li>
<li><input type="checkbox" class="childCheckBox">Child 1-2 </li>
<li><input type="checkbox" class="childCheckBox">Child 1-3 </li>
</ul>
</div>
<div class="wrapper">
<input type="checkbox" class="parentCheckBox" /> Parent 2
<ul>
<li><input type="checkbox" class="childCheckBox">Child 2-1 </li>
<li><input type="checkbox" class="childCheckBox">Child 2-2 </li>
<li><input type="checkbox" class="childCheckBox">Child 2-3 </li>
</ul>
</div>
JavaScript:
// When parent checkbox is changed
$('.parentCheckBox').on('change', function(e){
var self = this;
// Get all child checkboxes
var childs = $(this).closest('.wrapper').find('.childCheckBox');
// Go though all childs
$(childs).each(function(i, e){
// If parent is checked set child value to 1
if($(self).prop('checked')) {
$(this).val(1);
} else { // ...else set child value to 0
$(this).val(0);
}
});
});
https://jsbin.com/qisizudupa/edit?html,js,output

$(document).on('click', '.childCheckBox', function(e) {
var childCheckBoxInput = $(e.target);
if (childCheckBoxInput.is(':checked')) {
chilCheckBoxInput.val(1);
} else {
childCheckBoxInput.val(0);
}
});