Groups of radio-buttons contains groups of checkboxes - javascript

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.

Related

How to create dropdown that appear when a value is selected in a particular dropdown?

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>

How to toggle hide and show child elements in tree layout?

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/

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>

check/uncheck parent checkbox if all uncheck/check event on change with jQuery

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.

How to get the selected node items from jQuery checkbox tree

I am using jQuery to generate the checkbox tree, I am not able to get the checked node from tree list. Please help me on this.
Here is my code:-
<script type="text/javascript">
//<!--
$(document).ready(function() {
$('#tabs').tabs({
cookie: { expires: 30 }
});
$('.jquery').each(function() {
eval($(this).html());
});
$('.button').button();
});
//-->
</script>
jQuery checkboxTree plugin demo
Project Home
<code class="jquery" lang="text/javascript">
$('#tree1').checkboxTree({
initializeUnchecked: 'collapsed',
collapse: function(){
alert('collapse event triggered (passed as option)');
},
expand: function(){
alert('expand event triggered (passed as option)');
},
check: function(n){
alert('Hi there!!!'+n);
},
uncheck: function(n){
alert('Hi there!!!'+n);
}
});
</code>
<ul id="tree1">
<li><input type="checkbox"><label>Node 1</label>
<ul>
<li><input type="checkbox"><label>Node 1.1</label>
<ul>
<li><input type="checkbox"><label>Node 1.1.1</label>
</ul>
</ul>
<ul>
<li><input type="checkbox"><label>Node 1.2</label>
<ul>
<li><input type="checkbox"><label>Node 1.2.1</label>
<li><input type="checkbox"><label>Node 1.2.2</label>
<li><input type="checkbox"><label>Node 1.2.3</label>
<ul>
<li><input type="checkbox"><label>Node 1.2.3.1</label>
<li><input type="checkbox"><label>Node 1.2.3.2</label>
</ul>
<li><input type="checkbox"><label>Node 1.2.4</label>
<li><input type="checkbox"><label>Node 1.2.5</label>
<li><input type="checkbox"><label>Node 1.2.6</label>
</ul>
</ul>
<li><input type="checkbox"><label>Node 2</label>
<ul>
<li><input type="checkbox"><label>Node 2.1</label>
<ul>
<li><input type="checkbox"><label>Node 2.1.1</label>
</ul>
<li><input type="checkbox"><label>Node 2.2</label>
<ul>
<li><input type="checkbox"><label>Node 2.2.1</label>
<li><input type="checkbox"><label>Node 2.2.2</label>
<li><input type="checkbox"><label>Node 2.2.3</label>
<ul>
<li><input type="checkbox"><label>Node 2.2.3.1</label>
<li><input type="checkbox"><label>Node 2.2.3.2</label>
</ul>
<li><input type="checkbox"><label>Node 2.2.4</label>
<li><input type="checkbox"><label>Node 2.2.5</label>
<li><input type="checkbox"><label>Node 2.2.6</label>
</ul>
</ul>
</ul>
Please do help me on this.
You should just be able to use the :checked selector. The following should return any checked checkboxes in the tree1 element.
var checkedCheckboxes = $('#tree1 input[type="checkbox"]:checked');

Categories

Resources