チェックボックス

Web

2023年3月5日

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

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

今回は「チェックボックス」について書きます。

チェックボックスとは

チェックボックス（check box）とは、複数の選択肢の中から、複数の項目を選択させたい時に使われるボタンです。

例えばアンケートで「あてはまるものを全て選んでください」とか、お問い合わせフォームの「個人情報保護方針に同意する」のチェックとかによく使われています。

うちのトグルスイッチはこのチェックボックスを応用したものです。

実装

<input>タグを使います。
type属性にcheckboxを指定します。

<input type="checkbox">選択肢A
<input type="checkbox">選択肢B
<input type="checkbox">選択肢C

以前やったラジオボタン同様、選択肢をクリックしてもチェックが入るように<label>タグとfor属性を設定します。

<input type="checkbox" id="a"><label for="a">選択肢A</label>
<input type="checkbox" id="b"><label for="b">選択肢B</label>
<input type="checkbox" id="c"><label for="c">選択肢C</label>

堪忍袋

巾着袋（給料袋）

お袋

チェックボックスと選択肢の間の微妙な隙間はクリックできないので、本当は<input>も<label></label>で囲った方がいいみたいです。

全選択 / 全解除

すべて一括で選択したり解除したりするボタンがあると便利ですね。

JavaScriptかJQueryを使うとできるみたいです。

参考：Into the Program｜【JavaScript】チェックボックスを全選択／全解除する

「すべて選択」というチェックボックスを作ります。IDはcheckAllとします。

<input type="checkbox" id="checkAll"><label for="checkAll">すべて選択</label>

<input type="checkbox" id="a"><label for="a">選択肢A</label>
<input type="checkbox" id="b"><label for="b">選択肢B</label>
<input type="checkbox" id="c"><label for="c">選択肢C</label>

それぞれの選択肢にchecksというクラスを付けます。

<input type="checkbox" id="checkAll"><label for="checkAll">すべて選択</label>

<input type="checkbox" class="checks" id="a"><label for="a">選択肢A</label>
<input type="checkbox" class="checks" id="b"><label for="b">選択肢B</label>
<input type="checkbox" class="checks" id="c"><label for="c">選択肢C</label>

以下のスクリプトを記述します。

let checkAll = document.getElementById("checkAll");

let el = document.getElementsByClassName("checks");

const funcCheckAll = (bool) => {
  for (let i = 0; i < el.length; i++) {
    el[i].checked = bool;
  }
}

const funcCheck = () => {
  let count = 0;
  for (let i = 0; i < el.length; i++) {
    if (el[i].checked) {
      count += 1;
    }
  }

  if (el.length === count) {
    checkAll.checked = true;
  } else {
    checkAll.checked = false;
  }
};

checkAll.addEventListener("click",() => {
  funcCheckAll(checkAll.checked);
},false);

for (let i = 0; i < el.length; i++) {
  el[i].addEventListener("click", funcCheck, false);
}

このfor文というのがよくわかりません。もっと勉強しなくては。