<html>
<head>
<script src="assets/js/jquery.min.js"></script>
</head>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul ul {
margin: 0 0 0 30px;
}
</style>
<body>
<ul id="root"></ul>
</body>
<script>
var data={ id: 0, title: "root - not displayed", children: [ { id: 1, title:
"Computers", children: [ { id: 11, title: "Laptops", children: [ { id: 111,
title: "Pen Drives" }, { id: 112, title: "Printers" }] }, { id: 12, title:
"Desktops" }] }, { id: 2, title: "Mobiles", children: [ { id: 21, title:
"Smartphones" }, { id: 22, title: "Android Mobiles" }, { id: 23, title:
"Windows Mobiles" }, { id: 24, title: "iphones" }] }, { id: 3, title:
"Sports", children: [ { id: 0, title: "cricket" }, { id: 45, title: "Tennis"
}, { id: 46, title: "Football" }, { id: 47, title: "Golf" }] }] };
function addItem(parentUL, branch) {
for (var key in branch.children) {
var item = branch.children[key];
$item = $('<li>', {
id: "item" + item.id
});
$item.append($('<input>', {
type: "checkbox",
id: "item" + item.id,
name: "item" + item.id
}));
$item.append($('<label>', {
for: "item" + item.id,
text: item.title
}));
parentUL.append($item);
if (item.children) {
var $ul = $('<ul>', {
style: 'display: none'
}).appendTo($item);
$item.append();
addItem($ul, item);
}
}
}
$(function() {
addItem($('#root'), data);
$(':checkbox').change(function() {
$(this).closest('li').children('ul').slideToggle();
});
$('label').click(function() {
$(this).closest('li').find(':checkbox').trigger('click');
});
});
</script>
</html>
0 comments:
Post a Comment