ラジオボタンでは、ひとつ選ぶと他の選択は解除されますが、 チェックボタンでは複数選択が可能です。
でも、見た目はチェックボックスで、複数選択したくない場合もあるわけで、そんなときはこんなかんじで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<table class="check-lists"> <tr> <th></th> <th>おいしい</th> <th>ふつう</th> <th>まずい</th> </tr> <tr> <td>きなこもちうどん</td> <td><input type="checkbox" name="chk1" value="1"></td> <td><input type="checkbox" name="chk1" value="2"></td> <td><input type="checkbox" name="chk1" value="3"></td> <td>チョコパイラーメン</td> <td><input type="checkbox" name="chk2" value="1"></td> <td><input type="checkbox" name="chk2" value="2"></td> <td><input type="checkbox" name="chk2" value="3"></td> </tr> </table> <script> jQuery(function($){ $('input:checkbox').click(function() { $(this).closest('.check-lists tr').find('input:checkbox').not(this).prop('checked', false); }); }); </script> |
| おいしい | ふつう | まずい | |
|---|---|---|---|
| きなこもちうどん | |||
| チョコパイラーメン |
jQueryですが、 $(‘input:checkbox’).click チェックボックスがクリックされた時のイベントで動作します。
$(this).closest(‘.check-lists tr’) で、クリックされたチェックボックスが含まれる行を取得します。
closest() は、最も近い先祖要素を見つけるメソッド。
find(‘input:checkbox’) で、行にあるチェックボックスを全て検出 not(this) で、クリックしたチェックボックは除外して、それ以外のチェックボックスを、 prop(‘checked’, false) で、チェックを解除します。
