全てのチェックボックスにチェックを入れたり、外したりする。

HTML

<p> <div> <label for="checksAll"> <input type="checkbox" id="checksAll">全て選択 </label> </div> </p> <p> <div> <label> <input type="checkbox" class="checks" value="check1">チェック１ </label> <label> <input type="checkbox" class="checks" value="check2">チェック２ </label> <label> <input type="checkbox" class="checks" value="check3">チェック３ </label> <label> <input type="checkbox" class="checks" value="check4">チェック４ </label> <label> <input type="checkbox" class="checks" value="check5">チェック５ </label> </div> </p>

JavaScript

const checkall = document.getElementById("checksAll"); // 全て選択のチェックボックスの要素を取得 const checks = document.querySelectorAll(".checks"); // その他のチェックボックスの要素を取得 checkall.addEventListener('click', () => { // 全て選択がクリックされたら for (val of checks) { // その他のチェックボックスに対してループ処理 checkall.checked == true ? val.checked = true : val.checked = false; // 全て選択がチェックされたら全てチェックする、全て選択のチェックが外れたら全てのチェックを外す } });