チェックボックスをラジオボタンのように扱う

ラジオボタンでは、ひとつ選ぶと他の選択は解除されますが、 チェックボタンでは複数選択が可能です。

でも、見た目はチェックボックスで、複数選択したくない場合もあるわけで、そんなときはこんなかんじで。

おいしい ふつう まずい
きなこもちうどん
チョコパイラーメン

jQueryですが、 $('input:checkbox').click チェックボックスがクリックされた時のイベントで動作します。
$(this).closest('.check-lists tr') で、クリックされたチェックボックスが含まれる行を取得します。
closest() は、最も近い先祖要素を見つけるメソッド。
find('input:checkbox') で、行にあるチェックボックスを全て検出 not(this) で、クリックしたチェックボックは除外して、それ以外のチェックボックスを、 prop('checked', false) で、チェックを解除します。

1+
  • このエントリーをはてなブックマークに追加