19/02/2011 02:00 | Thủ thuật - Tips
Đoạn code sau sẽ giúp bạn thực hiện việc check/Uncheck các phần tử là cha, con trong một dãy tree các input checkbox.
================================================================
<script type="text/javascript">
$(document).ready(function(){
$('.chk').click(function(){
if ($(this).is(':checked')) {
$(this).parent().find('input:checkbox').attr('checked', true);
}
else{
$(this).parent().find('input:checkbox').attr('checked', false);
}
updateCheck();
});
});
function updateCheck(){
$('input.chk').change(function() {
if ($(this).is(':checked')) {
$(this).closest('ul').siblings('input:checkbox').attr('checked', true).closest('ul').siblings('input:checkbox').attr('checked', true);
}
});
}
</script>
================================================================
<ul>
<li>
<input type="checkbox" value="1" name="chk-1" id="chk-1-0">
<label for="chk-1-0">Categories in English Page</label>
<ul>
<li>
<input type="checkbox" value="3" name="chk-3" checked="checked" id="chk-3-1">
<label for="chk-3-1">Sightseeing Tours</label>
<ul>
<li>
<input type="checkbox" value="8" name="chk-8" checked="checked" id="chk-8-3">
<label for="chk-8-3">London Coach Tours</label>
</li>
<li>
<input type="checkbox" value="9" name="chk-9" checked="checked" id="chk-9-3">
<label for="chk-9-3">Out of London Coach Tours</label>
</li>
<li>
<input type="checkbox" value="10" name="chk-10" checked="checked" id="chk-10-3">
<label for="chk-10-3">Walking and Bike Tours</label>
</li>
<li>
<input type="checkbox" value="11" name="chk-11" checked="checked" id="chk-11-3">
<label for="chk-11-3">Black Taxi Tours</label>
</li>
<li>
<input type="checkbox" value="12" name="chk-12" checked="checked" id="chk-12-3">
<label for="chk-12-3">Evening Tours</label>
</li>
<li>
<input type="checkbox" value="13" name="chk-13" checked="checked" id="chk-13-3">
<label for="chk-13-3">Celebrity Tours</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" value="4" name="chk-4" id="chk-4-1">
<label for="chk-4-1">Low Cost Tours</label>
</li>
<li>
<input type="checkbox" value="5" name="chk-5" id="chk-5-1">
<label for="chk-5-1">Eurostar Trips</label>
</li>
<li>
<input type="checkbox" value="6" name="chk-6" id="chk-6-1">
<label for="chk-6-1">Attraction Tickets</label>
</li>
<li>
<input type="checkbox" value="7" name="chk-7" id="chk-7-1">
<label for="chk-7-1">Dining & Entertainment</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" value="2" name="chk-2" id="chk-2-0">
<label for="chk-2-0">Categories in Vietnamese Page</label>
<ul>
<li>
<input type="checkbox" value="15" name="chk-15" id="chk-15-2">
<label for="chk-15-2">Tour tham quan</label>
</li>
<li>
<input type="checkbox" value="16" name="chk-16" id="chk-16-2">
<label for="chk-16-2">Tour giá rẻ</label>
</li>
</ul>
</li>
</ul>