Javascript generate recursive JSON object from nested UL LI check box - javascript

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>

Related

Javascript enable html when input checkbox checked

What should be the condition for: If i click the check box then the items for that particular brand is triggered?
Here I want to print the values for the item selected
The current code is showing Cannot read properties of null (reading 'addEventListener')
let filterBrand = document.getElementById("filter-brands");
filterBrand.addEventListener("change", function() {
if (filterBrand.value == "Amana") {
document.querySelector(".item-list").innerHTML = "";
for (let i = 0; i < productData.length; i++) {
console.log("hello");
}
}
});
<h5>Filter By Brand</h5>
<ul id="filter-brands">
<li>
<input type="checkbox" id="Amana" value="Amana" />
<label for="Amana">Amana</label>
</li>
<li>
<input type="checkbox" id="Frigidaire" value="Frigidaire" />
<label for="Frigidaire">Frigidaire</label>
</li>
<li>
<input type="checkbox" id="GE" value="GE" />
<label for="GE">GE</label>
</li>
<li>
<input type="checkbox" id="Insignia" value="Insignia" />
<label for="Insignia">Insignia</label>
</li>
<li>
<input type="checkbox" id="LG" value="LG" />
<label for="LG">LG</label>
</li>
<li>
<input type="checkbox" id="Samsung" value="Samsung" />
<label for="Samsung">Samsung</label>
</li>
<li>
<input type="checkbox" id="Whirlpool" value="Whirlpool" />
<label for="Whirlpool">Whirlpool</label>
</li>
</ul>

You can retrieve all checked checkboxes within ul#filter-brands using the css-selector #filter-brands input[type='checkbox']:checked. For example:
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.closest(`#filter-brands`)) {
console.clear();
const selected = [];
// all checked checkboxes
document.querySelectorAll(`#filter-brands input[type='checkbox']:checked`)
.forEach( cb => /* here you can insert code to display stuff */
selected.push(cb.id) );
console.log(`Selected: ${selected.length ? selected.join(`, `) : `NONE`}`);
}
}
<h5>Filter By Brand</h5>
<ul id="filter-brands">
<li>
<input type="checkbox" id="Amana" value="Amana" />
<label for="Amana">Amana</label>
</li>
<li>
<input type="checkbox" id="Frigidaire" value="Frigidaire" />
<label for="Frigidaire">Frigidaire</label>
</li>
<li>
<input type="checkbox" id="GE" value="GE" />
<label for="GE">GE</label>
</li>
<li>
<input type="checkbox" id="Insignia" value="Insignia" />
<label for="Insignia">Insignia</label>
</li>
<li>
<input type="checkbox" id="LG" value="LG" />
<label for="LG">LG</label>
</li>
<li>
<input type="checkbox" id="Samsung" value="Samsung" />
<label for="Samsung">Samsung</label>
</li>
<li>
<input type="checkbox" id="Whirlpool" value="Whirlpool" />
<label for="Whirlpool">Whirlpool</label>
</li>
</ul>
A more specific approach (handler per checkbox):
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.closest(`#filter-brands`) && evt.target.type === `checkbox`) {
const selected = evt.target.checked;
return document.querySelector(`[data-selector='${evt.target.id}']`)
.classList[evt.target.checked ? `add` : `remove`](`selected`);
}
}
ul {
display: inline-block;
max-width: 50vw;
}
ul#filter-brands {
float: left;
}
#brand-lists li {
display: none;
}
#brand-lists li.selected {
display: revert;
}
<h5>Filter By Brand</h5>
<ul id="filter-brands">
<li>
<input type="checkbox" id="Amana" value="Amana" />
<label for="Amana">Amana</label>
</li>
<li>
<input type="checkbox" id="Frigidaire" value="Frigidaire" />
<label for="Frigidaire">Frigidaire</label>
</li>
<li>
<input type="checkbox" id="GE" value="GE" />
<label for="GE">GE</label>
</li>
<li>
<input type="checkbox" id="Insignia" value="Insignia" />
<label for="Insignia">Insignia</label>
</li>
<li>
<input type="checkbox" id="LG" value="LG" />
<label for="LG">LG</label>
</li>
<li>
<input type="checkbox" id="Samsung" value="Samsung" />
<label for="Samsung">Samsung</label>
</li>
<li>
<input type="checkbox" id="Whirlpool" value="Whirlpool" />
<label for="Whirlpool">Whirlpool</label>
</li>
</ul>
<ul id="brand-lists">
<li data-selector="Amana">Amana list</li>
<li data-selector="Frigidaire">Frigidaire list</li>
<li data-selector="GE">GE list</li>
<li data-selector="Insignia">Insignia list
<li data-selector="LG">LG list</li>
<li data-selector="Samsung">Samsung list</li>
<li data-selector="Whirlpool">Whirlpool list</li>
</ul>

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>

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);
}
});

How to select next element using jquery?

I want to apply some design on the next element. But my problem is I am getting this error:
Error: Syntax error, unrecognized expression: [object Object] > label
Here's my selections:
BROWSE BY
<ul class="list-unstyled">
<li>
<input type="radio" id="cat-1" class="category_select" name="category_type" data-category-type="1" value="all_product" checked="checked" />
<label for="cat-1"><span></span>All</label>
</li>
<li>
<input type="radio" id="cat-2" class="category_select" name="category_type" data-category-type="2" value="japanese_tea" />
<label for="cat-2"><span></span>Japanese Tea</label>
</li>
<li>
<input type="radio" id="cat-3" class="category_select" name="category_type" data-category-type="3" value="black_vinegar" />
<label for="cat-3"><span></span>Black Vinegar</label>
</li>
<li>
<input type="radio" id="cat-4" class="category_select" name="category_type" data-category-type="4" value="food" />
<label for="cat-4"><span></span>Food</label>
</li>
<li>
<input type="radio" id="cat-5" class="category_select" name="category_type" data-category-type="5" value="cosmetic_health" />
<label for="cat-5"><span></span>Cosmetic / Health</label>
</li>
<li>
<input type="radio" id="cat-6" class="category_select" name="category_type" date-category-type="6" value="others" />
<label for="cat-6"><span></span>Others</label>
</li>
</ul>
Here's my JS:
$('.category_select').on('change', function() {
var cat = $(this);
var category_type = $(this).data('category-type');
$(cat + ' > label').css({'color':'red'}); //wont apply some css why?
});
Can you help me with this?

You need to use .next() traversal method to get the next sibling of an element
In your code cat is a jQuery object so when used in string concatenation your selector becomes [object Object] > label
$('.category_select').on('change', function() {
var cat = $(this);
var category_type = $(this).data('category-type');
cat.next('label').css({
'color': 'red'
}); //wont apply some css why?
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled">
<li>
<input type="radio" id="cat-1" class="category_select" name="category_type" data-category-type="1" value="all_product" checked="checked" />
<label for="cat-1"><span></span>All</label>
</li>
<li>
<input type="radio" id="cat-2" class="category_select" name="category_type" data-category-type="2" value="japanese_tea" />
<label for="cat-2"><span></span>Japanese Tea</label>
</li>
<li>
<input type="radio" id="cat-3" class="category_select" name="category_type" data-category-type="3" value="black_vinegar" />
<label for="cat-3"><span></span>Black Vinegar</label>
</li>
<li>
<input type="radio" id="cat-4" class="category_select" name="category_type" data-category-type="4" value="food" />
<label for="cat-4"><span></span>Food</label>
</li>
<li>
<input type="radio" id="cat-5" class="category_select" name="category_type" data-category-type="5" value="cosmetic_health" />
<label for="cat-5"><span></span>Cosmetic / Health</label>
</li>
<li>
<input type="radio" id="cat-6" class="category_select" name="category_type" date-category-type="6" value="others" />
<label for="cat-6"><span></span>Others</label>
</li>
</ul>

You can directly select the next label using the id attribute of selected input box
$('.category_select').on('change', function() {
var cat = this.id;
var category_type = $(this).data('category-type');
$("label").css({'color':'black'}) // Remove red color from previously selected item
$("label[for='"+cat+"']").css({'color':'red'}); // Apply red color on selected item
});
JSFIDDLE EXAMPLE

you need to use .next() selector for selecting the next element, instead $(cat + ' > label')
$('.category_select').on('change', function() {
var cat = $(this);
var category_type = $(this).data('category-type');
cat.next('label').css({'color':'red'}); //syntax for selecting next in js
});
Hope this helped you out??

Groups of radio-buttons contains groups of checkboxes

I'm trying to make a list of radio buttons that contain a group of check boxes and these in turn contain another group checkboxes:
My code works fine when I use in one radio button. If I select another one JS is returned something strange, and I do not know how to fix it.
Here is my code:
HTML
<ul>
<li class="radio">
<input type="radio" name="level-1">submenu1.1
<ul>
<li>
<input type="checkbox" name="level-2">submenu1.1.1
<ul>
<li><input type="checkbox" name="level-3">submenu1.1.1.1</li>
<li><input type="checkbox" name="level-3">submenu1.1.1.2</li>
<li><input type="checkbox" name="level-3">submenu1.1.1.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.1.2
<ul>
<li><input type="checkbox" name="level-3">submenu1.1.2.1</li>
<li><input type="checkbox" name="level-3">submenu1.1.2.2</li>
<li><input type="checkbox" name="level-3">submenu1.1.2.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.1.3
<ul>
<li><input type="checkbox" name="level-3">submenu1.1.3.1</li>
<li><input type="checkbox" name="level-3">submenu1.1.3.2</li>
<li><input type="checkbox" name="level-3">submenu1.1.3.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.1.4
<ul>
<li><input type="checkbox" name="level-3">submenu1.1.4.1</li>
<li><input type="checkbox" name="level-3">submenu1.1.4.2</li>
<li><input type="checkbox" name="level-3">submenu1.1.4.3</li>
</ul>
</li>
</ul>
</li>
<br>
<li class="radio">
<input type="radio" name="level-1" value="submenu">submenu1.2
<ul>
<li>
<input type="checkbox" name="level-2">submenu1.2.1
<ul>
<li><input type="checkbox" name="level-3">submenu1.2.1.1</li>
<li><input type="checkbox" name="level-3">submenu1.2.1.2</li>
<li><input type="checkbox" name="level-3">submenu1.2.1.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.2.2
<ul>
<li><input type="checkbox" name="level-3">submenu1.2.2.1</li>
<li><input type="checkbox" name="level-3">submenu1.2.2.2</li>
<li><input type="checkbox" name="level-3">submenu1.2.2.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.2.3
<ul>
<li><input type="checkbox" name="level-3">submenu1.2.3.1</li>
<li><input type="checkbox" name="level-3">submenu1.2.3.2</li>
<li><input type="checkbox" name="level-3">submenu1.2.3.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.2.4
<ul>
<li><input type="checkbox" name="level-3">submenu1.2.4.1</li>
<li><input type="checkbox" name="level-3">submenu1.2.4.2</li>
<li><input type="checkbox" name="level-3">submenu1.2.4.3</li>
</ul>
</li>
</ul>
</li>
<br>
<li class="radio">
<input type="radio" name="level-1">submenu1.3
<ul>
<li>
<input type="checkbox" name="level-2">submenu1.3.1
<ul>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.1.1</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.1.2</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.1.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.3.2
<ul>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.2.1</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.2.2</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.2.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.3.3
<ul>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.3.1</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.3.2</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.3.3</li>
</ul>
</li>
<li>
<input type="checkbox" name="level-2">submenu1.3.4
<ul>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.4.1</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.4.2</li>
<li><input type="checkbox" name="level-3" value="submenu">submenu1.3.4.3</li>
</ul>
</li>
</ul>
</li>
</ul>
JS
$(document).ready(function() {
$("li:not(.radio)").hide();
$("input[name='level-1']").change(function() {
console.log(this);
$("li:not(.radio)").hide();
var $val = $(this).next("ul").children("li");
$val.slideToggle("fast");
$val.next("ul").children("li").hide();
$("input[type=checkbox][name='level-2']").click(function (event) {
$(this).next("ul").children("li").slideToggle("fast");
var checked = $(this).is(':checked');
if (!checked) {
$(this).parent().find("input[type=checkbox][name='level-3']").prop("checked", false);
}
});
});
});
http://jsfiddle.net/benatespina/Et95z/

It is happening because you are triggering level-2 change event inside level-1 change event.
Write them separately.
Write:
$("li:not(.radio)").hide();
$("input[name='level-1']").change(function () {
console.log(this);
$("li:not(.radio)").hide();
var $val = $(this).next("ul").children("li");
$val.slideToggle("fast");
$val.next("ul").children("li").hide();
$("input[type=checkbox][name='level-2']:checked").removeAttr("checked");
});
$("input[type=checkbox][name='level-2']").change(function (event) {
$(this).next("ul").find("li").slideToggle("fast");
var checked = $(this).is(':checked');
if (!checked) {
$(this).parent().find("input[type=checkbox][name='level-3']").prop("checked", false);
}
});
Updated fiddle here.

Categories

Resources