Develop Reference

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>

Issue using dynamic parent and child checkboxes

Here is the live demo
Problem: Checkboxes is not working in a dynamic way and also mutiple divs should work dynamic here in the example have 5.
<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>
<div>
<input type="checkbox" class="parentCheckBox" /> Parent 3 <a onclick="document.getElementById('div_3').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_3').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_3" style="display:none;">
<ul>
<li><input type="checkbox" class="childCheckBox" />Child 3-1 </li>
<li><input type="checkbox" class="childCheckBox" />Child 3-2 </li>
<li><input type="checkbox" class="childCheckBox" />Child 3-3 </li>
</ul>
</div>
</div>
<div>
<input type="checkbox" class="parentCheckBox" /> Parent 4 <a onclick="document.getElementById('div_4').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_4').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_4" style="display:none;">
<ul>
<li><input type="checkbox" class="childCheckBox" />Child 4-1 </li>
<li><input type="checkbox" class="childCheckBox" />Child 4-2 </li>
<li><input type="checkbox" class="childCheckBox" />Child 4-3 </li>
</ul>
</div>
Tried this:
$(document).ready(
function() {
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(
function() {
$(this).parents('div:eq(0)').find('.childCheckBox').attr('checked', this.checked);
}
);
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(
function() {
if ($(this).parents('div:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false)
$(this).parents('div:eq(0)').find('.parentCheckBox').attr('checked', false);
if (this.checked == true) {
var flag = true;
$(this).parents('div:eq(0)').find('.childCheckBox').each(
function() {
if (this.checked == false)
flag = false;
}
);
$(this).parents('div:eq(0)').find('.parentCheckBox').attr('checked', flag);
}
}
);
}
);

Try this:
$(document).on('change', '.parentCheckBox', function() {
var that = $(this);
that.closest('div').find('.childCheckBox').prop('checked', that.is(':checked'));
});
$(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;
parChk.prop('checked', checked);
console.log(checked);
});
Check the DEMO
EDIT
If understood correctly, you want the parent checkbox to be checked only if all of the children elements are checked.
To achieve this behaviour, just change this line:
var checked = c > 0;
to
var checked = c == par.find('.childCheckBox').length;
Updated DEMO

Exclude disabled checkboxes when using Select All

I have checkboxes with labels in table. I have added one checkbox outside the table "Select All" with id "chkbox". Now the below code is working fine. It is
Selecting and Deselecting all the checkboxes in the table. Now there are some pages where some checkboxes are disabled due to business logic. I want these checkboxes should not be affected.
<script type="text/javascript">
var s = jQuery.noConflict();
s(document).ready(function() {
s('#chkbox').change(function() {
var all = s('table').find('input[type="checkbox"]');
if (this.checked) {
all.prop('checked', true);
} else {
all.prop('checked', false);
}
});
});
</script>

Use :not() with :disabled selector.
var all = $('table').find('input[type="checkbox"]:not(:disabled)');
^^^^^^^^^^^^^^^^
This will not select the disabled checkboxes
$('#selectAll').change(function() {
$(':checkbox:not(:disabled)').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" id="selectAll" />Select All
<ul>
<li>
<input type="checkbox" disabled />
</li>
<li>
<input type="checkbox" />Not disabled</li>
<li>
<input type="checkbox" />Not disabled</li>
<li>
<input type="checkbox" disabled />
</li>
<li>
<input type="checkbox" />Not disabled</li>
</ul>
You can also use :enabled selector.
$('table').find('input[type="checkbox"]:enabled')
$('#selectAll').change(function() {
$(':checkbox:enabled').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" id="selectAll" /> Select All
<ul>
<li>
<input type="checkbox" disabled />
</li>
<li>
<input type="checkbox" />Not disabled</li>
<li>
<input type="checkbox" />Not disabled</li>
<li>
<input type="checkbox" disabled />
</li>
<li>
<input type="checkbox" />Not disabled</li>
</ul>
Note that: :enabled == :not(:disabled)

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??

jquery check and uncheck all with action

I have more checkbox input that call function "boxclick" when the user click on this:
<input id="1box" type="checkbox" name="selected[]" onclick="boxclick(this,'1')">
<input id="2box" type="checkbox" name="selected[]" onclick="boxclick(this,'2')">
<input id="3box" type="checkbox" name="selected[]" onclick="boxclick(this,'3')">
<input id="4box" type="checkbox" name="selected[]" onclick="boxclick(this,'4')">
For check/uncheck all i use simple jquery script:
<input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" checked="checked">
My problem is when i check/uncheck all the function "boxclick" not run.
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
}

I think you can do:
HTML
<input id="1box" type="checkbox" name="selected[]">
<input id="2box" type="checkbox" name="selected[]">
<input id="3box" type="checkbox" name="selected[]">
<input id="4box" type="checkbox" name="selected[]">
jQuery
If you want to check/uncheck all checkbox:
var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
checkboxes.prop('checked', this.checked);
});
If you want to make select any one at a time:
var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
checkboxes.prop('checked', false);
this.checked = !this.checked;
});​
DEMO

Setting attribute of checkboxes to checked does not automatically fake a click event for you! Because you put those boxclick function calls within some "onclick" handlers, you must trigger a fake click event in order for your javascript to think that it clicked all the boxes. To trigger fake click event use $('#whatever').trigger('click'), for instance:
$('input[name*=\'selected\']').trigger('click');
If you want check/uncheck all functionality, you must say "ok, master checkbox, please listen for whenever I am checked or unchecked. When that happens, please set checked attribute of my slave boxes (your other boxes on the page) to match the master's current checked attribute." Like this:
function checkAllorUncheckAll(event){
var chiefCheckbx = event.currentTarget;
var myBoxes = $('input[name*=\'selected\']');
myBoxes.prop( "checked", $(chiefCheckbx).prop("checked") ).trigger('click');
}
$('#masterCheckBox').on('change',checkAllorUncheckAll);

I guess
$('input[name*=\'selected\']').attr('checked',
this.checked).trigger('click');
should do the trick here

Demo
http://jsfiddle.net/H37cb/
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});
});
</script>
<div id="wrapper">
<li style="margin-top: 20px">
<input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
<ul>
<li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
<li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
<li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
<li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
<li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
<li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
</ul>
</li>
</ul>
</li>
</div>