ラジオボタンでは、ひとつ選ぶと他の選択は解除されますが、 チェックボタンでは複数選択が可能です。
でも、見た目はチェックボックスで、複数選択したくない場合もあるわけで、そんなときはこんなかんじで。
| おいしい | ふつう | まずい | |||||
|---|---|---|---|---|---|---|---|
| きなこもちうどん | チョコパイラーメン |
| おいしい | ふつう | まずい | |
|---|---|---|---|
| きなこもちうどん | |||
| チョコパイラーメン |
jQueryですが、 $(‘input:checkbox’).click チェックボックスがクリックされた時のイベントで動作します。
$(this).closest(‘.check-lists tr’) で、クリックされたチェックボックスが含まれる行を取得します。
closest() は、最も近い先祖要素を見つけるメソッド。
find(‘input:checkbox’) で、行にあるチェックボックスを全て検出 not(this) で、クリックしたチェックボックは除外して、それ以外のチェックボックスを、 prop(‘checked’, false) で、チェックを解除します。