CheckAll CheckBox Jquery
CheckAll CheckBox Jquery
HTML
<div id="tree">
<ul>
<li>
<input type="checkbox" />
Root
<ul>
<li>
<input type="checkbox" />
Child 1
<ul>
<li>
<input type="checkbox" />
Subchild 1</li>
<li>
<input type="checkbox" />
Subchild 2</li>
<li>
<input type="checkbox" />
Subchild 3</li>
</ul>
</li>
<li>
<input type="checkbox" />
Child Inma
<ul>
<li>
<input type="checkbox" />
Subchild 1</li>
<li>
<input type="checkbox" />
Subchild 2</li>
<li>
<input type="checkbox" />
Subchild 3</li>
</ul>
</li>
<li>
<input type="checkbox" />
Child 2
<ul>
<li>
<input type="checkbox" />
Subchild 1</li>
<li>
<input type="checkbox" />
Subchild 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
ul{
margin-left:30px;
}
JavaScript
$(document).ready(function () {
$.extend($.expr[':'], {
unchecked: function (obj) {
return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
}
});
$("#tree input:checkbox").live('change', function () {
$(this).next('ul').find('input:checkbox').prop('checked', $(this).prop("checked"));
for (var i = $('#tree').find('ul').length - 1; i >= 0; i--) {
$('#tree').find('ul:eq(' + i + ')').prev('input:checkbox').prop('checked', function () {
return $(this).next('ul').find('input:unchecked').length === 0 ? true : false;
});
}
});
});