バニラJSでクリックされたチェックボックスを配列に追加、削除を検証した話。

投稿日：2024年5月28日

先日から、企業一覧の絞り込み検索を扱った案件に取り組んでいます。
機能の一部として、複数の選択から、複数の条件で絞り込む項目がありました。
少々、初歩的なJavaScript（バニラJS）の話になりますが検証したことを備忘録として掲載しておきます。

▼このようなものです。

チェックすると配列に追加され、下部に出力されます。
チェックを外すと配列から削除され、テキストからも削除されます。

ソースコードです。

<body>
  <form action="">
    <div class="checkboxWrap" id="checkboxWrap">
      <label><input type="checkbox" value="吾輩は猫である">
        <p>吾輩は猫である</p>
      </label>
      <label><input type="checkbox" value="走れメロス">
        <p>走れメロス</p>
      </label>
      <label><input type="checkbox" value="銀河鉄道の夜">
        <p>銀河鉄道の夜</p>
      </label>
      <label><input type="checkbox" value="羅城門">
        <p>羅城門</p>
      </label>
    </div>
  </form>
  <p id="result"></p>
  <script src="js/index.js"></script>
</body>

.checkboxWrap {
  display: flex;
  flex-direction: column;
  label {
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    p {
      padding: 0 0.5rem;
      color: #fff;
      border-radius: 5px;
      transition: 0.3s;

      margin: 0.25rem 0;
      cursor: pointer;
      &:hover {
        opacity: 0.6;
      }
    }
    &:nth-child(1) {
      p {
        background-color: red;
      }
    }
    &:nth-child(2) {
      p {
        background-color: blue;
      }
    }
    &:nth-child(3) {
      p {
        background-color: green;
      }
    }
    &:nth-child(4) {
      p {
        background-color: orange;
      }
    }
  }
}

//配列を準備
let checkArr = [];

// checkboxのinput要素
let checkBtn = document.querySelectorAll("input[type='checkbox']");
// テキスト出力用
let arrResult = document.querySelector("#result");

// input要素の数だけ繰り返す
for (let i = 0, checkBtnLen = checkBtn.length; i < checkBtnLen; i++) {
  //チェックボックスがチェックされたら
  checkBtn[i].addEventListener("change", () => {
    if (checkBtn[i].checked) {
      //チェックされたボタンを取得
      checkArr.push(checkBtn[i].value); //配列に追加
      arrResult.innerText = checkArr; //テキストに出力
    } else {
      //チェックが外れたら配列から削除
      checkArr.splice(checkArr.indexOf(checkBtn[i].value), 1);
      arrResult.innerText = checkArr; //テキストに出力
    }
  });
}

▲12行目、changeイベントでチェックボックスが変更されたら以下を実行します。 19行目の indexOf() でチェックが外れた項目を取得し splice() で削除しています。

まとめ

Reactで展開しようと思いバニラJSで書いてみました。
上記以外にも、2つのプルダウン項目と併用し、さらに高度な絞り込み検索を実装しています。
リリースし許可を得てから本サイトで紹介したいと思います。
ちなみにjQueryで書くと以下のようになります。

let checkArr = []; //配列を準備
// チェックされたら
$("input[type=checkbox]").change(function () {
  if ($(this).prop("checked")) {
    checkArr.push($(this).val()); //チェックされた値を格納
  } else {
    // 配列からチェックが外れた項目を削除
    checkArr.splice(checkArr.indexOf($(this).val()), 1);
  }
});

なお、本記事で紹介しているソースコードはご自由にお使いいただいても構いませんが、支障が生じても責任は負いませんのでご了承いただきますようお願いいたします。

最後までお読みいただき、ありがとうございます。

Pocket