チェックボックスで1つだけ選ばせる

2024年9月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「選択肢のうち1つだけ選択可能なチェックボックス」を作ってみました。

もういちどおさらい

チェックボックス、ラジオボタン、セレクトボックスについてもう一度おさらいしておきましょう。

① チェックボックス

・<input type="checkbox">

・複数選択可能

・クリックで選択 / 選択解除

② ラジオボタン

・<input type="radio">

・どれか1つを選択

・どれか1つを選択したら、未選択状態には戻せない

・最初からどれか1つが選択されている状態にしておくのが望ましい？

③ セレクトボックス

・<select>と<option>

・どれか1つを選択

・クリックで選択肢のリストが現れる

・未選択状態に戻せる

チェックボックスで1つだけ選ばせる

参考：SPIQA NOTE｜チェックボックスで1つしかチェックさせない方法

さて今回の本題です。

クリックで選択 / 選択解除できるようにしつつ、ラジオボタンのように選択肢の中からどれか1つだけ選ばせたい、という場合には「チェックが入ったらすべてのチェックを解除して、該当項目だけチェック状態に戻す」といいみたいです。早速やってみましょう。

チェックボックスを6個用意して、3個ずつ、2つのグループ（name="soul"とname="body"）に分けてみました。

<input type="checkbox" id="cyclone" name="soul">
<label for="cyclone">サイクロン</label>

<input type="checkbox" id="luna" name="soul">
<label for="luna">ルナ</label>

<input type="checkbox" id="heat" name="soul">
<label for="heat">ヒート</label>

<input type="checkbox" id="joker" name="body">
<label for="joker">ジョーカー</label>

<input type="checkbox" id="trigger" name="body">
<label for="trigger">トリガー</label>

<input type="checkbox" id="metal" name="body">
<label for="metal">メタル</label>

jQueryを記述します。

soulの中から1つだけ、bodyの中から1つだけ、選べるようにします。

$(function() {
  $('input[name="soul"]').on('click', function() {
    if ($(this).prop('checked')) {
      $('input[name="soul"]').prop('checked', false);
      $(this).prop('checked', true);
    }
  });
});

$(function() {
  $('input[name="body"]').on('click', function() {
    if ($(this).prop('checked')) {
      $('input[name="body"]').prop('checked', false);
      $(this).prop('checked', true);
    }
  });
});

まとめ

どれか1つ選ばせたいならラジオボタンが最適だとは思うのですが「どれか1つ選ばせたいんだけど何も選択しない場合もあり得る」という時にはいいかもしれません。

例えば化合物の一覧があって「酸性」「塩基性」「中性」でフィルターをかける時とかですかね。
何もチェックされていない時はすべて表示する感じで。