チェックボックスがたくさん並んでいるページを作成したのですが、すべて選択したい場合に手動でチェックをつけるのは大変なので、
全部のチェックボックスにチェックをつけるボタンを作りたいです。
JavaScriptで実装したいのですが、どんなコードを記述すればよいでしょうか？
複数のチェックボックスをまとめて選択するJavaScriptのコードを紹介します。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function selectAllCheckboxes() {
// "my_checkbox"で始まるIDを持つチェックボックスのみを取得
const checkboxes = document.querySelectorAll('input[type="checkbox"][id^="my_checkbox"]');
// 各チェックボックスに対して処理を行う
checkboxes.forEach(checkbox => {
checkbox.checked = true;
});
}</script>
</head>
<body>
<h1>全てのチェックボックスを選択するデモ</h1>
<div>
<input type="checkbox" id="my_checkbox1" /><label for="my_checkbox1">チェックボックス1です。</label>
</div>
<div>
<input type="checkbox" id="my_checkbox2" /><label for="my_checkbox2">チェックボックス2です。</label>
</div>
<div>
<input type="checkbox" id="my_checkbox3" /><label for="my_checkbox3">チェックボックス3です。</label>
</div>
<div>
<input type="checkbox" id="my_checkbox4" /><label for="my_checkbox4">チェックボックス4です。</label>
</div>
<div>
<input type="checkbox" id="my_checkbox5" /><label for="my_checkbox5">チェックボックス5です。</label>
</div>
<div>
<input type="checkbox" id="my_checkbox6" /><label for="my_checkbox6">チェックボックス6です。</label>
</div>
<div>
<input type="checkbox" id="my_checkbox7" /><label for="my_checkbox7">チェックボックス7です。</label>
</div>
<div>
<input type="checkbox" id="my_checkbox8" /><label for="my_checkbox8">チェックボックス8です。</label>
</div>
<div>
<input type="checkbox" id="my_checkbox9" /><label for="my_checkbox9">チェックボックス9です。</label>
</div>
<div>
<input type="checkbox" id="my_checkbox10" /><label for="my_checkbox10">チェックボックス10です。</label>
</div>
<hr />
<a href="javascript:void(0);" onclick="selectAllCheckboxes()">全てのチェックボックスを選択する。</a>
</body>
</html>
document.querySelectorAll()メソッドでページ内のチェックボックスのDOM要素を取得します。引数に
input[type="checkbox"][id^="my_checkbox"] を与えており、inputタグで、typeの値が "checkbox" で idが"my_checkbox"で始まるDOM要素を列挙して
checkboxes に代入しています。
SqerySelectorの書式に関する詳細はこちらの記事を参照してください。
checkboxesを forEachループで処理し、checkboxesに代入されている複数のチェックボックス要素に対して、checked プロパティを trueに設定し、
全てのチェックボックスを選択した状態にします。
checkboxes.forEach(checkbox => {
checkbox.checked = true;
});
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[全てのチェックボックスを選択する。]リンクをクリックします。チェックボックスがすべて選択された状態になります。
