JavaScript | チェックボックスを一括指定・解除する
JavaScriptを使って複数のチェックボックスを一括指定・解除する方法の紹介です。
See the Pen JavaScript | てｓｔ by yochans (@yochans) on CodePen.
一括指定にはボタンやテキストなど種類があるかと思いますが、サンプルでは全指定・全解除にチェックボックスを利用しています。
チェックボックスを一括指定・解除するサンプルコード
<p><input type="checkbox" id="checkbox_all">全て選択 / 解除
<hr>
<p><input type="checkbox" class="checkbox_list" name="" value="1">選択肢1</p>
<p><input type="checkbox" class="checkbox_list" name="" value="2">選択肢2</p>
<p><input type="checkbox" class="checkbox_list" name="" value="3">選択肢3</p>
</p>//全選択・解除のチェックボックス
let checkbox_all = document.querySelector("#checkbox_all");
//チェックボックスのリスト
let checkbox_list = document.querySelectorAll(".checkbox_list");
//全選択のチェックボックスイベント
checkbox_all.addEventListener('change', change_all);
function change_all() {
//チェックされているか
if (checkbox_all.checked) {
//全て選択
for (let i in checkbox_list) {
if (checkbox_list.hasOwnProperty(i)) {
checkbox_list[i].checked = true;
}
}
} else {
//全て解除
for (let i in checkbox_list) {
if (checkbox_list.hasOwnProperty(i)) {
checkbox_list[i].checked = false;
}
}
}
};全選択・全解除の切り替えに使うチェックボックス。
サンプルではひとつなのでquerySelector()でid名から取得していますが、リストの上下などに設置する場合は、querySelectorAll()でclass名から取得する事になると思います。
let checkbox_all = document.querySelector("#checkbox_all");addEventListener()に「change」を指定する事でチェックボックスの操作によるイベントを実装。
onchangeイベントでの記述方法もあります。
//addEventListener()
checkbox_all.addEventListener('change', change_all);
//onchangeイベント
checkbox_all.onchange = change_all;イベント処理の関数内で全選択・全解除のチェックボックスがチェックされているかどうかを判別します。
この場合、「this.checked」でもOK
function change_all() {
if (checkbox_all.checked) {
//選択されている場合
} else {
//選択されていない場合
}
};チェックボックスの一覧はquerySelectorAll()でclass名から取得しています。
let checkbox_list = document.querySelectorAll(".checkbox_list");配列として複数取得していますので、for文などのいずれかの繰り返す処理を利用します。
サンプルではfor inを利用。
for (let i in checkbox_list) {
if (checkbox_list.hasOwnProperty(i)) {
//リスト内の要素を個別に処理
}
}チェックボックスのオンオフを切り替えるには「対象.checked」を利用して変更します。
「true」で選択、「false」で選択解除となります。
//チェックする
対象のチェックボックス.checked = true;
//チェックを外す
対象のチェックボックス.checked = false;