Here is my html code which requires some update like span or something which can let it hide all child elements to display children on click only for individual parent.
how can I add toggle span and javascript to make it show on click only specific child of each parent not all of them at once.
i am too beginner with javascript so no idea how can this be done please help me out how can i resolve this issue it will save my life. Thanks a lot
<div class=" col-lg-4 col-md-9 col-sm-8" id="Permission">
<ul id="Div1" class="tree">
<li class="has">
<input type="checkbox" name="Dashboard" value="yes"> Dashboard
<ul> </ul>
</li>
</ul>
<ul id="Div2" class="tree">
<li class="has" "="">
<input type="checkbox" name="Master" value="yes"> Master
<ul>
<li>
<input type="checkbox" id="Upper1 name=" menus-accesscontrol[9]"="" value="9"> AccessControl
<ul id="Parent1">
<li>
<input type="checkbox" name="Menus-User[3]" value="3"> User
<ul class="childs">
<li><input type="checkbox" name="UserAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="UserAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="UserAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="UserAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-Menu[6]" value="6"> Menu
<ul class="childs">
<li><input type="checkbox" name="MenuAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="MenuAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="MenuAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="MenuAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-Group[23]" value="23"> Group
<ul class="childs">
<li><input type="checkbox" name="GroupAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="GroupAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="GroupAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="GroupAllowView" value="0"> Allow View </li>
</ul>
</li>
</ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-CustomerMaster[2]" value="2"> CustomerMaster
<ul class="childs">
<li><input type="checkbox" name="CustomerMasterAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="CustomerMasterAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="CustomerMasterAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="CustomerMasterAllowView" value="0"> Allow View</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<ul id="Div3" class="tree">
<li class="has" "="">
<input type="checkbox" name="Inventory" value="yes"> Inventory
<ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-UserRecharge[8]" value="8"> UserRecharge
<ul class="childs">
<li><input type="checkbox" name="UserRechargeAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="UserRechargeAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="UserRechargeAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="UserRechargeAllowView" value="0"> Allow View</li>
</ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-SupplierInventory[43]" value="43"> SupplierInventory
<ul class="childs">
<li><input type="checkbox" name="SupplierInventoryAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SupplierInventoryAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="SupplierInventoryAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="SupplierInventoryAllowView" value="0"> Allow View</li>
</ul>
<li>
<input type="checkbox" id="Upper2 name=" menus-report[30]"="" value="30"> Report
<ul id="Parent2">
<li>
<input type="checkbox" name="Menus-CustomerException[31]" value="31"> CustomerException
<ul class="childs">
<li><input type="checkbox" name="CustomerExceptionAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="CustomerExceptionAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="CustomerExceptionAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="CustomerExceptionAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-SuplierException[33]" value="33"> SuplierException
<ul class="childs">
<li><input type="checkbox" name="SuplierExceptionAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SuplierExceptionAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="SuplierExceptionAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="SuplierExceptionAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-SupplierReport[34]" value="34"> SupplierReport
<ul class="childs">
<li><input type="checkbox" name="SupplierReportAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SupplierReportAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="SupplierReportAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="SupplierReportAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-SenderSupplierSummary[35]" value="35"> SenderSupplierSummary
<ul class="childs">
<li><input type="checkbox" name="SenderSupplierSummaryAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SenderSupplierSummaryAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="SenderSupplierSummaryAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="SenderSupplierSummaryAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-MonthlySale[39]" value="39"> MonthlySale
<ul class="childs">
<li><input type="checkbox" name="MonthlySaleAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="MonthlySaleAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="MonthlySaleAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="MonthlySaleAllowView" value="0"> Allow View </li>
</ul>
</li>
</ul>
</li>
</li> </li> </li> </li> </li> </li> </li> </li> </li> </li>
</ul>
</li>
</ul>
<ul id="Div4" class="tree">
<li class="has" "="">
<input type="checkbox" name="Invoice" value="yes"> Invoice
<ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-CustomerInvoice[44]" value="44"> CustomerInvoice
<ul class="childs">
<li><input type="checkbox" name="CustomerInvoiceAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="CustomerInvoiceAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="CustomerInvoiceAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="CustomerInvoiceAllowView" value="0"> Allow View</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul id="Div5" class="tree">
<li class="has" "="">
<input type="checkbox" name="Contract Management" value="yes"> Contract Management
<ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-Configuration[45]" value="45"> Configuration
<ul class="childs">
<li><input type="checkbox" name="ConfigurationAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="ConfigurationAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="ConfigurationAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="ConfigurationAllowView" value="0"> Allow View</li>
</ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-Contract[47]" value="47"> Contract
<ul class="childs">
<li><input type="checkbox" name="ContractAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="ContractAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="ContractAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="ContractAllowView" value="0"> Allow View</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</div>
You can use the 'toggleClass' in jQuery though there are other ways base on your needs. But you can check this basic example so that you can have an idea.
$(".root").on("click", function(){
$(this).find("ul").toggleClass("hide-children");
})
Sample 1 Fiddle: https://jsfiddle.net/nq5ecbLu/1/
Sample 2 Fiddle: https://jsfiddle.net/mt10aeg7/
Related
So, I want to create a dropdown with values: Monthly, Quarterly, Yearly, and the values that the user chooses those dropdown appear on the screen.
So my HTML is :
<div id="listmain" class="dropdown-check-list" tabindex="1" onchange="show();">
<span class="anchor" onclick="getElements('listmain')">Select Criteria</span>
<ul id="listmain_items" class="items">
<li><input type="checkbox" name="main" value="month" id="month"><label for="month">Monthly </label></li>
<li><input type="checkbox" name="main" value="quarter" id="quarter"><label for="quarter">Quartely</label></li>
<li><input type="checkbox" name="main" value="year" id="year"><label for="year">Yearly</label></li>
</ul>
</div>
<div id="list1" class="dropdown-check-list" tabindex="1">
<span class="anchor" onclick="getElements('list1')">Select Months</span>
<ul id="list1_items" class="items" style="display: none;">
<li><input type="checkbox" name="month" value="Apr-2021" id="apr"><label for="apr">April</label> </li>
<li><input type="checkbox" name="month" value="May-2021" id="may"><label for="may">May</label> </li>
<li><input type="checkbox" name="month" value="Jun-2021" id="jun"><label for="jun">June</label> </li>
<li><input type="checkbox" name="month" value="Jul-2021" id="jul"><label for="jul">July</label></li>
<li><input type="checkbox" name="month" value="Aug-2021" id="aug"><label for="aug">August</label></li>
<li><input type="checkbox" name="month" value="Sep-2021" id="sep"><label for="sep">September</label></li>
<li><input type="checkbox" name="month" value="Oct-2021" id="oct"><label for="oct">October</label></li>
<li><input type="checkbox" name="month" value="Nov-2021" id="nov"><label for="nov">November</label></li>
<li><input type="checkbox" name="month" value="Dec-2021" id="dec"><label for="dec">December</label></li>
<li><input type="checkbox" name="month" value="Jan-2021" id="jan"><label for="jan">January</label> </li>
<li><input type="checkbox" name="month" value="Feb-2021" id="feb"><label for="feb">February</label></li>
<li><input type="checkbox" name="month" value="Mar-2021" id="mar"><label for="mar">March</label> </li>
</ul>
</div>
<div id="list2" class="dropdown-check-list" tabindex="100">
<span class="anchor" onclick="getElements('list2')">Select Quarter</span>
<ul id="list2_items" class="items">
<li><input type="checkbox" name="quarter" value="Quarter1" id="Q1"><label for="Q1">Apr - Jun (Quarter 1) </label></li>
<li><input type="checkbox" name="quarter" value="Quarter2" id="Q2"><label for="Q2">Jul - Sep (Quarter 2) </label></li>
<li><input type="checkbox" name="quarter" value="Quarter3" id="Q3"><label for="Q3">Oct - Dec (Quarter 3) </label></li>
<li><input type="checkbox" name="quarter" value="Quarter4" id="Q4"><label for="Q4">Jan - Mar (Quarter 4) </label></li>
</ul>
</div>
<div id="list3" class="dropdown-check-list" tabindex="100">
<span class="anchor" onclick="getElements('list3')">Select Monthly/Yearly</span>
<ul id="list3_items" class="items">
<li><input type="checkbox" value="April">6 Months </li>
<li><input type="checkbox" value="01">Year</li>
</ul>
</div>
<div id="list4" class="dropdown-check-list" tabindex="100">
<span class="anchor" onclick="getElements('list4')">Select Year</span>
<ul id="list4_items" class="items">
<li><input type="checkbox" name="year" value="2021">2021-2022 </li>
<!-- <li><input type="checkbox" name="year" value="2021" />2021</li> -->
</ul>
</div>
So I want to hide all of these and show a dropdown with checkbox of the following(Monthly,Quartely,Yearly) values and as the user selects from these, the particular dropdown appears.
You want something like this?
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div>
<select>
<option value="criteria">Select Criteria</option>
<option value="quarter">Select Quarter</option>
<option value="monthly">Select Monthly/Yearly</option>
<option value="year">Select Year</option>
</select>
</div>
<div class="criteria box">
<ul id="listmain_items" class="items">
<li><input type="checkbox" name="main" value="month" id="month">
<label for="month">Monthly </label></li>
<li><input type="checkbox" name="main" value="quarter" id="quarter">
<label for="quarter">Quartely</label></li>
<li><input type="checkbox" name="main" value="year" id="year">
<label for="year">Yearly</label></li>
</ul>
</div>
<div class="quarter box">
<ul>
<li><input type="checkbox" name="quarter" value="Quarter1" id="Q1">
<label for="Q1">Apr - Jun (Quarter 1) </label></li>
<li><input type="checkbox" name="quarter" value="Quarter2" id="Q2">
<label for="Q2">Jul - Sep (Quarter 2) </label></li>
<li><input type="checkbox" name="quarter" value="Quarter3" id="Q3">
<label for="Q3">Oct - Dec (Quarter 3) </label></li>
<li><input type="checkbox" name="quarter" value="Quarter4" id="Q4">
<label for="Q4">Jan - Mar (Quarter 4) </label></li>
</ul>
</div>
<div class="monthly box">
<ul>
<li><input type="checkbox" name="month" value="Apr-2021" id="apr">
<label for="apr">April</label> </li>
<li><input type="checkbox" name="month" value="May-2021" id="may">
<label for="may">May</label> </li>
<li><input type="checkbox" name="month" value="Jun-2021" id="jun">
<label for="jun">June</label> </li>
<li><input type="checkbox" name="month" value="Jul-2021" id="jul">
<label for="jul">July</label></li>
<li><input type="checkbox" name="month" value="Aug-2021" id="aug">
<label for="aug">August</label></li>
<li><input type="checkbox" name="month" value="Sep-2021" id="sep">
<label for="sep">September</label></li>
<li><input type="checkbox" name="month" value="Oct-2021" id="oct">
<label for="oct">October</label></li>
<li><input type="checkbox" name="month" value="Nov-2021" id="nov">
<label for="nov">November</label></li>
<li><input type="checkbox" name="month" value="Dec-2021" id="dec">
<label for="dec">December</label></li>
<li><input type="checkbox" name="month" value="Jan-2021" id="jan">
<label for="jan">January</label> </li>
<li><input type="checkbox" name="month" value="Feb-2021" id="feb">
<label for="feb">February</label></li>
<li><input type="checkbox" name="month" value="Mar-2021" id="mar">
<label for="mar">March</label> </li>
</ul>
</div>
<div class="year box">
<ul>
<li><input type="checkbox" value="6-months">6 Months </li>
<li><input type="checkbox" value="year">Year</li>
<li><input type="checkbox" name="year" value="2021">2021-2022 </li>
<li><input type="checkbox" name="year" value="2021" />2021</li>
</ul>
</div>
I have structor like
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="1">
Du Lịch
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="3">
Ẩm Thực
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="86">
Ẩm Thực Đường Phố
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="87">
Món Ngon
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="9">
Videos Giải Trí
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="81">
Làm Đẹp</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="82">
Nail
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="83">
Trang Điểm
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="84">
Làm Tóc
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="85">
Tattoo
</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>
What i need is i want choose level-0, it's will auto choose all lv-1 after it (child selection) and stop in lv-0 next.
How can i do it with JS or Jquery
I believe this is what you want. When a level-0 checkbox changes you want each of the following level-1 to change the same as the one you changed.
You traverse to the parent <li> and use nextUntil() to get the following group. Then change checked property of each of those checkboxes
$('.level-0 :checkbox').change(function(){
// from parent <li> get all siblings until next level-0
const $level_1 = $(this).closest('li.level-0').nextUntil('.level-0');
// set checked in them based on checked state of current one
$level_1.find(':checkbox').prop('checked', this.checked);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="1">
Du Lịch
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="3">
Ẩm Thực
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="86">
Ẩm Thực Đường Phố
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="87">
Món Ngon
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="9">
Videos Giải Trí
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="81">
Làm Đẹp</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="82">
Nail
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="83">
Trang Điểm
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="84">
Làm Tóc
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="85">
Tattoo
</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>
jQuery's nextUntil might be able to help a bit with this:
$(function() {
$('.level-0').change(function () {
var status = $('input[type="checkbox"]', this).is(':checked');
var nextChks = $(this).nextUntil('.level-0');
if (nextChks && nextChks.length > 0) {
for (var i = 0; i < nextChks.length; i++) {
$('input[type="checkbox"]', nextChks[i]).attr('checked', status).prop('checked', status);
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="1">
Du Lịch
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="3">
Ẩm Thực
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="86">
Ẩm Thực Đường Phố
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="87">
Món Ngon
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="9">
Videos Giải Trí
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="81">
Làm Đẹp</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="82">
Nail
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="83">
Trang Điểm
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="84">
Làm Tóc
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="85">
Tattoo
</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>
you can do that
with a bonus on checked/unchecked level-1 action to resume level-0
const
allCats = document.querySelector('#choose-categories')
, LevCats = [...allCats.querySelectorAll('li')]
;
allCats.onclick = ({target}) =>
{
if (!target.matches('input[type=checkbox]')) return
let liParent = target.closest('li')
, liRef = LevCats.findIndex(x=>x===liParent)
;
if (liParent.classList.contains('level-0'))
{
for (let i = ++liRef; i < LevCats.length; ++i)
if (LevCats[i].classList.contains('level-1') )
LevCats[i].querySelector('input[type=checkbox]').checked = target.checked
else
break
}
else // if (liParent.classList.contains('level-1')) *** BONUS ***
{
while ( !LevCats[--liRef].classList.contains('level-0') ) {}
if (target.checked)
LevCats[liRef].querySelector('input[type=checkbox]').checked = true
else
{
checkedCount = 0
for (let i = ++liRef; i < LevCats.length; ++i)
if (LevCats[i].classList.contains('level-1') )
{ if (LevCats[i].querySelector('input[type=checkbox]').checked ) checkedCount++ }
else
break;
if (checkedCount === 0) LevCats[--liRef].querySelector('input[type=checkbox]').checked = false
}
}
}
li.level-1 span::before { content : '\2015\2015'; color:lightgrey; }
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="1">
<span>Du Lịch</span>
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="3">
<span>Ẩm Thực</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="86">
<span>Ẩm Thực Đường Phố</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="87">
<span>Món Ngon</span>
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="9">
<span>Videos Giải Trí</span>
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="81">
<span>Làm Đẹp</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="82">
<span>Nail</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="83">
<span>Trang Điểm</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="84">
<span>Làm Tóc</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="85">
<span>Tattoo</span>
</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>
If you can/are allowed to change the html, you can make it to look like a tree, like the snippet below.. and what I did was
to add classes to each parent who has childrens and to each children itself (for the first group first-main-checkbox and first-sub-checkbox and for the second one with the second key word in class name)
get all elements with document.querySelectorAll(".first-sub-checkbox"); which return a NodeList (see querySelectorAll )
create a function who iterate through all elements returned by querySelectorAll and set the check state to true or false using a ternary operator
apply the function at click, which select/deselect checkbox: addEventListener("click", function) (see addEventListener)
I'm not saying that it's the best solution, but it's a start..
var firstMain = document.querySelector(".first-main-checkbox");
var firstChildrens = document.querySelectorAll(".first-sub-checkbox");
var secondMain = document.querySelector(".second-main-checkbox");
var secondChildrens = document.querySelectorAll(".second-sub-checkbox");
function toggleCheck(childrens) {
childrens.forEach(child => {
child.checked = child.checked == true ? false : true
})
}
firstMain.addEventListener("click", function() {
toggleCheck(firstChildrens)
});
secondMain.addEventListener("click", function() {
toggleCheck(secondChildrens)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label><input type="checkbox" name="selectItemallow[]" value="1">Du Lịch</label>
</li>
<li class="level-0">
<label><input class="first-main-checkbox" type="checkbox" name="selectItemallow[]" value="3">Ẩm Thực</label>
<ul>
<li class="level-1">
<label><input class="first-sub-checkbox" type="checkbox" name="selectItemallow[]" value="86">Ẩm Thực Đường Phố</label>
</li>
<li class="level-1">
<label><input class="first-sub-checkbox" type="checkbox" name="selectItemallow[]" value="87">Món Ngon</label>
</li>
</ul>
</li>
<li class="level-0">
<label><input type="checkbox" name="selectItemallow[]" value="9">Videos Giải Trí</label>
</li>
<li class="level-0">
<label><input class="second-main-checkbox" type="checkbox" name="selectItemallow[]" value="81">Làm Đẹp</label>
</li>
<ul>
<li class="level-1">
<label><input class="second-sub-checkbox"type="checkbox" name="selectItemallow[]" value="82"> Nail</label>
</li>
<li class="level-1">
<label><input class="second-sub-checkbox" type="checkbox" name="selectItemallow[]" value="83">Trang Điểm</label>
</li>
<li class="level-1">
<label><input class="second-sub-checkbox" type="checkbox" name="selectItemallow[]" value="84">Làm Tóc</label>
</li>
<li class="level-1">
<label><input class="second-sub-checkbox" type="checkbox" name="selectItemallow[]" value="85">Tattoo</label>
</li>
</ul>
<li class="level-0">
<label><input type="checkbox" name="selectItemallow[]" value="1">another lv 0 item</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>
I am not sure but gonna try.
You have element inside of event parameter so get li from it by calling parent('li')
then find all siblings that are after it by calling next('li') and do loop like this
const nexts = [];
par.next('li').foreach(function (elem) {
if (elem.hasClass('level-0') && nexts.length > 0)
return false; // break loop
if (elem.hasClass('level-1'))
nexts.push(elem); // add li element
});
then just go through nexts and for each find its input which you marked as checked. That's it.
I'm trying to show/hide some ul checkboxes when the parent is clicked. I've searched everywhere and I just can't get it to work!
Could someone please help me to get this to work? If a parent category is checked, sub checkboxes needs to show/hide.
This is the code:
<div id="refine-categories">
<h4>Categories</h4>
<ul class="parent cf">
<li id='project_category-3' class="popular-category"><label class="selectit"><input value="3" type="checkbox" name="cat_project_category[]" id="in-project_category-3" /> Aanbouw & Opbouw</label><ul class='children'>
<li id='project_category-33'><label class="selectit"><input value="33" type="checkbox" name="cat_project_category[]" id="in-project_category-33" /> aanbouw</label></li>
<li id='project_category-34'><label class="selectit"><input value="34" type="checkbox" name="cat_project_category[]" id="in-project_category-34" /> algemeen</label></li>
<li id='project_category-35'><label class="selectit"><input value="35" type="checkbox" name="cat_project_category[]" id="in-project_category-35" /> Fundering en heiwerken</label></li>
<li id='project_category-36'><label class="selectit"><input value="36" type="checkbox" name="cat_project_category[]" id="in-project_category-36" /> garage bouwen</label></li>
<li id='project_category-37'><label class="selectit"><input value="37" type="checkbox" name="cat_project_category[]" id="in-project_category-37" /> isoleren</label></li>
<li id='project_category-38'><label class="selectit"><input value="38" type="checkbox" name="cat_project_category[]" id="in-project_category-38" /> nieuwbouw</label></li>
<li id='project_category-39'><label class="selectit"><input value="39" type="checkbox" name="cat_project_category[]" id="in-project_category-39" /> opbouw</label></li>
<li id='project_category-40'><label class="selectit"><input value="40" type="checkbox" name="cat_project_category[]" id="in-project_category-40" /> renovatie</label></li>
<li id='project_category-41'><label class="selectit"><input value="41" type="checkbox" name="cat_project_category[]" id="in-project_category-41" /> veranda en serre</label></li>
</li>
</ul> </div>
When I click on a parent checkbox I can see the span class is changed to <span class="custom checkbox checked"></span>
Hope someone can help me to sort this out!
Thank you for your time!
PS: You can check the website here: http://bit.ly/20Miaom It's in the sidebar (right).
set the .children to display:none;.
then from .parent, find the first checkbox. add a change event then toggle .children if it is checked.
to be more generic for all lists, use this, go back up the the .parent and find the .children to toggle.
$('.parent input[type="checkbox"]:first-child').change(function(){
$(this).closest('.parent').find('.children').toggle($(this).is(':checked'));
});
$('.parent input[type="checkbox"]:first-child').change(function() {
$(this).closest('.parent').find('.children').toggle($(this).is(':checked'));
});
.children {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="refine-categories">
<h4>Categories</h4>
<ul class="parent cf">
<li id='project_category-3' class="popular-category">
<label class="selectit">
<input value="3" type="checkbox" name="cat_project_category[]" id="in-project_category-3" />Aanbouw & Opbouw</label>
<ul class='children'>
<li id='project_category-33'>
<label class="selectit">
<input value="33" type="checkbox" name="cat_project_category[]" id="in-project_category-33" />aanbouw</label>
</li>
<li id='project_category-34'>
<label class="selectit">
<input value="34" type="checkbox" name="cat_project_category[]" id="in-project_category-34" />algemeen</label>
</li>
<li id='project_category-35'>
<label class="selectit">
<input value="35" type="checkbox" name="cat_project_category[]" id="in-project_category-35" />Fundering en heiwerken</label>
</li>
<li id='project_category-36'>
<label class="selectit">
<input value="36" type="checkbox" name="cat_project_category[]" id="in-project_category-36" />garage bouwen</label>
</li>
<li id='project_category-37'>
<label class="selectit">
<input value="37" type="checkbox" name="cat_project_category[]" id="in-project_category-37" />isoleren</label>
</li>
<li id='project_category-38'>
<label class="selectit">
<input value="38" type="checkbox" name="cat_project_category[]" id="in-project_category-38" />nieuwbouw</label>
</li>
<li id='project_category-39'>
<label class="selectit">
<input value="39" type="checkbox" name="cat_project_category[]" id="in-project_category-39" />opbouw</label>
</li>
<li id='project_category-40'>
<label class="selectit">
<input value="40" type="checkbox" name="cat_project_category[]" id="in-project_category-40" />renovatie</label>
</li>
<li id='project_category-41'>
<label class="selectit">
<input value="41" type="checkbox" name="cat_project_category[]" id="in-project_category-41" />veranda en serre</label>
</li>
</li>
</ul>
</div>
<div id="refine-categories">
<h4>Categories 2</h4>
<ul class="parent cf">
<li id='project_category-3' class="popular-category">
<label class="selectit">
<input value="3" type="checkbox" name="cat_project_category[]" id="in-project_category-3" />Aanbouw & Opbouw</label>
<ul class='children'>
<li id='project_category-33'>
<label class="selectit">
<input value="33" type="checkbox" name="cat_project_category[]" id="in-project_category-33" />aanbouw</label>
</li>
<li id='project_category-34'>
<label class="selectit">
<input value="34" type="checkbox" name="cat_project_category[]" id="in-project_category-34" />algemeen</label>
</li>
<li id='project_category-35'>
<label class="selectit">
<input value="35" type="checkbox" name="cat_project_category[]" id="in-project_category-35" />Fundering en heiwerken</label>
</li>
<li id='project_category-36'>
<label class="selectit">
<input value="36" type="checkbox" name="cat_project_category[]" id="in-project_category-36" />garage bouwen</label>
</li>
<li id='project_category-37'>
<label class="selectit">
<input value="37" type="checkbox" name="cat_project_category[]" id="in-project_category-37" />isoleren</label>
</li>
<li id='project_category-38'>
<label class="selectit">
<input value="38" type="checkbox" name="cat_project_category[]" id="in-project_category-38" />nieuwbouw</label>
</li>
<li id='project_category-39'>
<label class="selectit">
<input value="39" type="checkbox" name="cat_project_category[]" id="in-project_category-39" />opbouw</label>
</li>
<li id='project_category-40'>
<label class="selectit">
<input value="40" type="checkbox" name="cat_project_category[]" id="in-project_category-40" />renovatie</label>
</li>
<li id='project_category-41'>
<label class="selectit">
<input value="41" type="checkbox" name="cat_project_category[]" id="in-project_category-41" />veranda en serre</label>
</li>
</li>
</ul>
</div>
You will need to use some JQuery for this.
$('#in-project_category-3').click(function () {
$(".children").toggle(this.checked);
});
while your child ul needs to get display: none
I made you a fiddle, i hope this is what you wanted:
https://jsfiddle.net/jfuhdq0g/2/
I have this tree list, I am checking all childrens checkboxes if parent is checked and so on, everything works great, but I am having an issue with the last ul Item 03 checkboxes, need to check if all checkboxes are checked then parent checkbox should be checked and the viceversa if the all checkboxes are unchecked then uncheck parent check, something like the toggle the parent checkbox based on all check/all unchecked.
I have a jsfiddle http://jsfiddle.net/g40e3nyL/
and this is how the js looks like:
function checks() {
$('input[type="checkbox"]').on('change', function(){
var checkboxes = $(this).parent().next('ul').find('input[type="checkbox"]');
var count_checked = checkboxes.filter(":checked").length;
if (count_checked == 0) {
console.log('All checked'); //find parent and uncheck box
} else if(count_checked != checkboxes.length) {
console.log('');
} else {
console.log('all childrens unselected'); //find parent and uncheck box
}
if ($(this)[0].checked == true) {
checkboxes.each(function(){
$(this).prop('checked', true).attr('checked', 'checked');
});
} else {
checkboxes.each(function(){
$(this).prop('checked', false).removeAttr('checked');
});
};
});
} checks();
This is how the html markup looks like:
<ul>
<li>
item 01<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
</ul>
</li>
<li>
item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
</ul>
</li>
<li>
item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 02<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
<ul>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 04<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
<li>
Item 03<label for=""><input type="checkbox" checked="checked" /></label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Something like this?
function checks() {
$('input[type="checkbox"]').on('change', function(){
var checkboxes = $(this).parent().next('ul').find('input[type="checkbox"]');
var siblings = $(this).closest('li').siblings().andSelf();
var siblings_checked_count = siblings.find('> label :checked').size();
var parent_checkbox = $(this).closest('ul').prev().find(':checkbox');
console.log(siblings, siblings_checked_count);
var count_checked = checkboxes.filter(":checked").length;
if (count_checked == 0) {
console.log('All checked'); //find parent and uncheck box
} else if(count_checked != checkboxes.length) {
console.log('');
} else {
console.log('all childrens unselected'); //find parent and uncheck box
}
if ($(this)[0].checked == true) {
checkboxes.each(function(){
$(this).prop('checked', true).attr('checked', 'checked');
});
} else {
checkboxes.each(function(){
$(this).prop('checked', false).removeAttr('checked');
});
};
if (!siblings_checked_count) {
parent_checkbox.prop('checked', false).removeAttr('checked');
}
else if (siblings_checked_count === siblings.size()) {
parent_checkbox.prop('checked', true).attr('checked', 'checked');
}
});
}
checks();
I forked your jsfiddle at http://jsfiddle.net/m8sr515L/.
Perhaps not the most elegant solution, but it works.
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.