jQuery プラグインCheckTreeを使用しており、ラジオ ボタンに基づいていくつかのチェック ボックスを自動選択できます。
私は2つのラジオボタンを持っています:
デフォルトのラジオボタンをクリックすると、いくつかのチェックボックスをオンにする必要があり、読み取り専用にする必要があり、残りのチェックボックスを無効にする必要があります(読み取り専用)
カスタムボタンをクリックすると、すべてのチェックボックスをオフにする必要があります
ここはフィドルです
以下は、これまでに試したコードです。
<script>
$(function() {
$('.check-all').live('change', function() {
// $('.tree').find('input[class=cus]').attr('checked', true);
$('.tree').find('input[class=def]').attr('checked', false);
// $('ul.tree').find('input.cus').siblings("div.checkbox").click();
$('ul.tree').find('input.def').siblings("div.checkbox").click();
});
$('.uncheck-all').live('change', function() {
// $('.tree').find('input[class=cus]').attr('checked',false);
$('.tree').find('input[class=def]').attr('checked', true);
$('ul.tree').find('input.def').siblings("div.checkbox").click();
});
});
</script>
<div class="b2"><b>Define categories </b>
</div>
</div>
<form action="http://localhost:8080/cgi-bin/cat_checkbox.pl" method="POST"
name="form1">
<div class="options">
<ul>
<label>
<input type="radio" name="Selection" class="check-all" value="Default"
id="type_0" checked="checked" />Default</label>
<label>
<input type="radio" name="Selection" class="uncheck-all" value="Custom"
id="type_1" />Custom</label>
</ul>
<ul class="tree">
<li>
<input type="checkbox">
<label>Select All</label>
<ul>
<li>
<input type='checkbox' value='1'>
<label style="" alt="">main1</label>
<ul>
<li>
<input type='checkbox' name='chk_0' class="def" value='1'>
<label>option1</label>
</li>
<li>
<input type='checkbox' name='chk_1' class="def" value='1'>
<label>option1</label>
</li>
</ul>
</li>
<li>
<input type='checkbox' name='' id='10' value='1'>
<label>main2</label>
<ul>
<li>
<input type='checkbox' class="cus" name='' id='chk_7' ' value='1 '> <label>option1</label></li>
<li><input type='checkbox ' class="cus" name='chk_4 ' id='chk_8
' value='1 '> <label>option1</label></li>
<li><input type='checkbox ' class="cus" name='chk_5 ' id='chk_9
' value='1 '><label>option1</label></li>
</ul>
</li>
<li><input type='checkbox ' name=' ' id='10 ' value='1 '><label>main3</label>
<ul style="width: 90%">
<li><input type='checkbox ' class="cus" name=' ' id='chk_7 '' value='1'>
<label>option1</label>
</li>
<li>
<input type='checkbox' class="cus" name='chk_4' id='chk_8' value='1'>
<label>option1</label>
</li>
<li>
<input type='checkbox' class="cus" name='chk_5' id='chk_9' value='1'>
<label>option1</label>
</li>
</ul>
</li>
<li>
<input type='checkbox' name='' id='10' value='1'>
<label>main3</label>
<ul style="width: 90%">
<li>
<input type='checkbox' class="def" name='' id='chk_7' ' value='1 '><label>option1</label></li>
<li><input type='checkbox ' class="def" name='chk_4 ' id='chk_8
' value='1 '><label>option1</label></li>
<li><input type='checkbox ' class="def" name='chk_5 ' id='chk_9
' value='1 '><label>option1</label></li>
</ul>
</li>
<li><input type='checkbox ' name=' ' id='10 ' value='1 '><label>main3</label>
<ul style="width: 90%">
<li><input type='checkbox ' class="cus" name=' ' id='chk_7 '' value='1'>
<label>option1</label>
</li>
<li>
<input type='checkbox' class="cus" name='chk_4' id='chk_8' value='1'>
<label>option1</label>
</li>
<li>
<input type='checkbox' class="cus" name='chk_5' id='chk_9' value='1'>
<label>option1</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>