I am creating a json tree with checkbox using jquery. Here is my code:
<body>
<div id="regionTree">
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<script>
$(function(){
var json = [{"ID":1,"Name":"r1","Child":[{"ID":1,"Name":"c1"},{"ID":2,"Name":"c2"}]},{"ID":1,"Name":"r2","Child":[{"ID":1,"Name":"c1"},{"ID":2,"Name":"c2"}]}];
//debugger;
var treeString = '';
treeString+='<ul>';
$(json).each(function(key, value) {
treeString+='<li>';
treeString+='<label><input type="checkbox" class="parent"/>'+value.Name+'</label><br/>';
//alert(value.Name);
if(value.Child != undefined && value.Child.length > 0)
{
treeString+='<ul>';
$(value.Child).each(function(key,value){
treeString+='<li>';
treeString+='<label><input type="checkbox" class="child"/>'+value.Name+'</label><br/>';
treeString+='</li>';
//alert(value.Name);
});
treeString+='</ul>';
}
treeString+='</li>';
});
treeString+='</ul>';
$('#regionTree').append(treeString);
//------
$('.parent').live('click', function(){
debugger;
console.log($(this).find('.child').size());
$(this).parent().children(':checkbox').prop("checked", true);
});
});
</script>
</body>
If you copy paste it and open up in FF/Chrome you can see the checkbox tree. I wanted to select all child elements of a node if parent is selected. But for some reason i am not able to get all child checkboxe for a node.
Please help.
the checkbox’s parent is the label, not the li.
try: