親にチェックするだけで、子や孫のチェックボックスもまとめてチェック出来る
Result
jQuery
//チェンジイベント
$("ul input:checkbox").change(function(){
if ($(this).is(':checked')) {
$(this).parent().find("input:checkbox").attr('checked', 'checked');
}
else {
$(this).parent().find("input:checkbox").removeAttr('checked');
$(this).parents('li').each(function(){
$(this).children('input:checkbox').removeAttr('checked');
});
}
});
html
<ul>
<li><input type="checkbox" id="input1"><label for="input1">check 1</label>
<ul>
<li><input type="checkbox" id="input11"><label for="input11">check 11</label></li>
<li><input type="checkbox" id="input12"><label for="input12">check 12</label></li>
<li><input type="checkbox" id="input13"><label for="input13">check 13</label></li>
</ul>
</li>
<li><input type="checkbox" id="input2"><label for="input2">check 2</label></li>
<li><input type="checkbox" id="input3"><label for="input3">check 3</label>
<ul>
<li><input type="checkbox" id="input31"><label for="input31">check 31</label></li>
<li><input type="checkbox" id="input32"><label for="input32">check 32</label></li>
<li><input type="checkbox" id="input33"><label for="input33">check 33</label>
<ul>
<li><input type="checkbox" id="input331"><label for="input331">check 331</label></li>
<li><input type="checkbox" id="input332"><label for="input332">check 332</label></li>
<li><input type="checkbox" id="input333"><label for="input333">check 333</label></li>
</ul>
</li>
</ul>
</li>
</ul>