【JavaScript】チェックボックスで一つだけ選択できるようにする

投稿日 2022年4月20日
著者 NKMR
カテゴリー JavaScript
カテゴリー jQuery

単一選択ならラジオボタン使えって話ですが、ラジオボタンだと一度選択するとチェックを外せなくなってしまうので、チェックボックスで実装することにしたのでメモ。

要件としては、

どれか一つだけを選択したい
再度クリックでチェックを外したい
他が選択された状態で別の項目を選択すると、すでに選択されているチェックを外したい

てな感じです。

JavaScriptで実装

まずはバニラです。

const checkGet = document.getElementsByName('check');
  checkGet.forEach((check) => {
    check.addEventListener('click', () => {
      if(check.checked) {
        checkGet.forEach((allChecks) => {
          allChecks.checked = false;
        });
        check.checked = true;
      }
    });
  });

jQueryで実装

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

まとめ

脱jqueryへの一歩ということでバニラでの実装を頑張ってみました。