【JavaScript】チェックボックスを全選択/解除するボタン作ってみた

スポンサーリンク
JavaScript

仕事で画面開発をしていて、全選択/解除ボタンが実装されている画面を見かけたので自分でも作ってみました!

完成品

できたものはこんな感じ。

See the Pen
JavaScript checkbox allcheck/uncheck example
by Seiya Takahashi (@takasei)
on CodePen.

コードは以下

HTML

<div class="container">
<div class="check-container">
  <div class="check-container-1">
    <p><input type="checkbox" name="checkbox" value="A">A</p>
    <p><input type="checkbox" name="checkbox" value="B">B</p>
    <p><input type="checkbox" name="checkbox" value="C">C</p>
    <p><input type="checkbox" name="checkbox" value="D">D</p>
    <p><input type="checkbox" name="checkbox" value="E">E</p>
  </div>
  <div class="check-container-2">
    <p><input type="checkbox" name="checkbox" value="F">F</p>
    <p><input type="checkbox" name="checkbox" value="G">G</p>
    <p><input type="checkbox" name="checkbox" value="H">H</p>
    <p><input type="checkbox" name="checkbox" value="I">I</p>
    <p><input type="checkbox" name="checkbox" value="J">J</p>
  </div>
  <div class="check-container-3">
    <p><input type="checkbox" name="checkbox" value="K">K</p>
    <p><input type="checkbox" name="checkbox" value="L">L</p>
    <p><input type="checkbox" name="checkbox" value="M">M</p>
    <p><input type="checkbox" name="checkbox" value="N">N</p>
    <p><input type="checkbox" name="checkbox" value="O">O</p>
  </div>
</div>

  <div class="button-container">
    <input id="checkall" type="button" value="全選択ボタン">
    <input id="uncheckall" type="button" value="全解除ボタン">
    <input id="search" type="button" value="検索">
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap');

body{
  font-family: 'Quicksand', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background:#DBDBDB;
}

.container{
  width:50%;
  height:400px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 5px 15px;
  justify-content: center;
  align-items: center;
  flex-direction:row;
  font-size:25px;
}

.check-container{
  margin-top:10px;
}

.check-container p{
  margin-left:20px;
}

.check-container-1{
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
}

.check-container-2{
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
}

.check-container-3{
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
}

.button-container{
    display: flex;
    justify-content:center;
    margin-top:50px;
  #uncheckall{
    margin-left:5px;
  }
  #search{
    margin-left:15px;
  }
}

JavaScript

//全選択ボタンの要素を取得する
const checkBtn = document.getElementById("checkall");
//全解除ボタンの要素を取得する
const uncheckBtn = document.getElementById("uncheckall");
//nameがcheckboxの要素を全て取得する
const el = document.getElementsByName("checkbox");

//全てのチェックボックスにチェックを付ける
const checkAll = () => {
    for (let i = 0; i < el.length; i++) {
        el[i].checked = true;
    }
};
//全てのチェックボックスのチェックを外す
const uncheckAll = () => {
    for (let i = 0; i < el.length; i++) {
        el[i].checked = false;
    }
};

//全選択ボタンをクリックした時「checkAll」を実行
checkBtn.addEventListener("click", checkAll, false);
//全選択ボタンをクリックした時「uncheckAll」を実行
uncheckBtn.addEventListener("click", uncheckAll, false);

ポイントは以下

addEventListener() メソッドで、ボタン押下時にが関数を実行するように設定する
②チェックボックス要素.checked = trueでチェックをつける、チェックボックス要素.checked = falseでチェックを外すことができる
③全選択/全解除なのでJavaScriptでチェックボックス要素を全て取得→forループで1つずつチェック状態を更新していくイメージ

読んでいただきありがとうございました!

JavaScript
スポンサーリンク
app crafts

コメント

タイトルとURLをコピーしました