おはこんばんちわ。この記事ではJavaScriptを使ってチェックボックスの全選択・全解除をする方法について解説します。jQueryは使いません。
チェックボックスで全選択・全解除を切り替える方法
完成図
「すべて選択/解除」のチェックボックスをクリックすると、選択と解除を切り替えることができます。
コード
<label><input type="checkbox" id="toggleCheckbox"> すべて選択/解除</label>
<label><input type="checkbox" name="animal[]"> カピバラ</label>
<label><input type="checkbox" name="animal[]"> インパラ</label>
<label><input type="checkbox" name="animal[]"> マンドリル</label>
<label><input type="checkbox" name="animal[]"> チベットスナギツネ</label>
<label><input type="checkbox" name="animal[]"> 飼育員</label>
<script>
//切替用のチェックボックスを定数に代入
const toggleCheckbox = document.getElementById('toggleCheckbox');
//チェックボックスのリストを定数に代入
const checkboxes = document.getElementsByName('animal[]');
//切替用チェックボックスが変更されたときの処理
toggleCheckbox.addEventListener('change', () => {
//すべてのチェックボックスの状態を切り替える
checkboxes.forEach((checkbox) => {
checkbox.checked = toggleCheckbox.checked;
});
});
</script>コードの解説
//切替用のチェックボックスを定数に代入
const toggleCheckbox = document.getElementById('toggleCheckbox');切替用のチェックボックスを定数toggleCheckboxに代入しておきます。getElementById()はそのidを持つ1つの要素を取得するメソッドです。
//チェックボックスのリストを定数に代入
const checkboxes = document.getElementsByName('animal[]');全選択・全解除の対象となるチェックボックスのリストを定数checkboxesに代入しておきます。getElementsByName()はそのnameを持つすべての要素のリストを取得するメソッドです。
//切替用チェックボックスが変更されたときの処理
toggleCheckbox.addEventListener('change', () => {
...
});切替用チェックボックスが変更されたときに関数を実行します。
addEventListener(イベントの種類, 関数)で、ターゲットにイベントが発生すると関数が実行されます。この場合、ターゲットはtoggleCheckbox、イベントはchange、関数は() => { ... }です。
//すべてのチェックボックスの状態を切り替える
checkboxes.forEach((checkbox) => {
checkbox.checked = toggleCheckbox.checked;
});切替用チェックボックスが選択状態ならばすべてのチェックボックスを選択し、未選択状態ならば選択を解除する処理です。
forEach()は配列の各要素に対して関数を実行するメソッドです。チェックボックスのリストcheckboxesから1つずつ要素を取り出して処理していきます。checkboxには取り出された1つのチェックボックスが入っています。
checkedプロパティはターゲットの選択状態の取得と設定をすることができます。ターゲットが選択状態ならばcheckedプロパティはtrueを返し、未選択状態ならばfalseを返します。またcheckedプロパティにtrueを代入するとターゲットは選択状態になり、falseを代入すると未選択状態になります。
つまりcheckbox.checked = toggleCheckbox.checked;とすることで、切替用チェックボックスが選択状態ならばすべてのチェックボックスが選択され、未選択状態ならば選択が解除されるようになります。
無料で利用できるプログラミング学習サービスをお探しならば Code Lesson
はいかがでしょうか。プロのエンジニアが監修した学習ロードマップで効率的に学習、AIに質問、最後にクイズで理解度をチェックできます。
選択済と未選択が混在する状態を表現したい
選択済と未選択のチェックボックスが混在するときに、切替用チェックボックスに「-」を表示する方法です。
完成図
コード
<label><input type="checkbox" id="toggleCheckbox" /> すべて選択/解除</label>
<label><input type="checkbox" name="animal[]" /> カピバラ</label>
<label><input type="checkbox" name="animal[]" /> インパラ</label>
<label><input type="checkbox" name="animal[]" /> マンドリル</label>
<label><input type="checkbox" name="animal[]" /> チベットスナギツネ</label>
<label><input type="checkbox" name="animal[]" /> 飼育員</label>
<script>
//切替用のチェックボックスを定数に代入
const toggleCheckbox = document.getElementById('toggleCheckbox');
//チェックボックスのリストを定数に代入
const checkboxes = document.getElementsByName('animal[]');
//切替用チェックボックスが変更されたときの処理
toggleCheckbox.addEventListener('change', () => {
//すべてのチェックボックスの状態を切り替える
checkboxes.forEach((checkbox) => {
checkbox.checked = toggleCheckbox.checked;
});
});
//いずれかのチェックボックスが変更されたときの処理
checkboxes.forEach((checkbox) => {
checkbox.addEventListener('change', () => {
//チェック済みチェックボックスを定数に代入
const checkedCheckboxes = document.querySelectorAll('input[name="animal[]"]:checked');
//各チェックボックスに対して関数を実行
checkboxes.forEach(() => {
//すべてのチェックボックスが選択されていたら
if (checkedCheckboxes.length === checkboxes.length) {
toggleCheckbox.indeterminate = false;
toggleCheckbox.checked = true;
//すべてのチェックボックスが選択されていなかったら
} else if (checkedCheckboxes.length === 0) {
toggleCheckbox.indeterminate = false;
toggleCheckbox.checked = false;
//それ以外ならば
} else {
toggleCheckbox.indeterminate = true;
}
});
});
});
</script>以下、コードの解説です。
//いずれかのチェックボックスが変更されたときの処理
checkboxes.forEach((checkbox) => {
checkbox.addEventListener('change', () => {
...
});
});切替用チェックボックス以外のチェックボックスがクリックされたときの処理です。
チェックボックスのリストcheckboxesに対してforEach()メソッドを使って、各チェックボックスcheckboxが変更(change)されたときに関数を実行します。
//チェック済みチェックボックスを定数に代入
const checkedCheckboxes = document.querySelectorAll('input[name="animal[]"]:checked');チェック済みチェックボックスのリストを定数checkedCheckboxesに入れておきます。これはあとでチェック済みチェックボックスの数を数えるときに使います。
querySelectorAll()は、指定したCSSセレクタに一致する要素のリストを取得します。CSSの擬似クラスセレクタ:checkedでチェック済みの要素を取得できます。
//各チェックボックスに対して関数を実行
checkboxes.forEach(() => {
//すべてのチェックボックスが選択されていたら
if (checkedCheckboxes.length === checkboxes.length) {
toggleCheckbox.indeterminate = false;
toggleCheckbox.checked = true;
//すべてのチェックボックスが選択されていなかったら
} else if (checkedCheckboxes.length === 0) {
toggleCheckbox.indeterminate = false;
toggleCheckbox.checked = false;
//それ以外ならば
} else {
toggleCheckbox.indeterminate = true;
}
});checkboxes.forEach(関数)で、各チェックボックスに関数を実行します。
すべてのチェックボックスが選択されていたら(checkedCheckboxes.length === checkboxes.length)、切替用チェックボックスの未確定状態をfalseにします。また、選択状態をtrueにします。
すべてのチェックボックスが選択されていなかったら(checkedCheckboxes.length === 0)、切替用チェックボックスの未確定状態をfalseにします。また、選択状態もfalseにします。
それ以外ならば（つまり、選択済と未選択が混在していれば）、切替用チェックボックスの未確定状態をtrueにします。
ボタンで全選択・全解除を切り替える方法
完成図
「すべて選択/解除」のボタンをクリックすると、選択と解除を切り替えることができます。
コード
<button id="toggleButton">すべて選択/解除</button>
<label><input type="checkbox" name="animal[]" /> カピバラ</label>
<label><input type="checkbox" name="animal[]" /> インパラ</label>
<label><input type="checkbox" name="animal[]" /> マンドリル</label>
<label><input type="checkbox" name="animal[]" /> チベットスナギツネ</label>
<label><input type="checkbox" name="animal[]" /> 飼育員</label>
<script>
//切替ボタンを定数に代入
const toggleButton = document.getElementById('toggleButton');
//チェックボックスのリストを定数に代入
const checkboxes = document.getElementsByName('animal[]');
//ボタンがクリックされたときの処理
toggleButton.addEventListener('click', () => {
//1つ目のチェックボックスの状態を取得
const isChecked = checkboxes[0].checked;
//すべてのチェックボックスの状態を切り替える
checkboxes.forEach((checkbox) => {
checkbox.checked = !isChecked;
});
});
</script>コードの解説
//切替ボタンを定数に代入
const toggleButton = document.getElementById('toggleButton');切替用のボタンを定数toggleButtonに代入しておきます。getElementById()はそのidを持つ1つの要素を取得するメソッドです。
//チェックボックスのリストを定数に代入
const checkboxes = document.getElementsByName('animal[]');全選択・全解除の対象となるチェックボックスのリストを定数checkboxesに代入しておきます。getElementsByName()はそのnameを持つすべての要素のリストを取得するメソッドです。
//ボタンがクリックされたときの処理
toggleButton.addEventListener('click', () => {
...
});ボタンがクリックされたときに関数を実行します。
addEventListener(イベントの種類, 関数)で、ターゲットにイベントが発生すると関数が実行されます。この場合、ターゲットはtoggleButton、イベントはclick、関数は() => { ... }です。
//1つ目のチェックボックスの状態を取得
const isChecked = checkboxes[0].checked;1つ目のチェックボックス(checkboxes[0])の選択状態を取得して、定数isCheckedに入れておきます。チェックされていればtrue、されていなければfalseが代入されます。
//すべてのチェックボックスの状態を切り替える
checkboxes.forEach((checkbox) => {
checkbox.checked = !isChecked;
});すべてのチェックボックスの状態を1つ目のチェックボックスの状態と逆の状態に切り替えます。
リンクで全選択・全解除を切り替える方法
完成図
「すべて選択/解除」のリンクをクリックすると、選択と解除を切り替えることができます。
コード
<a id="toggleLink">すべて選択/解除</a>
<label><input type="checkbox" name="animal[]" /> カピバラ</label>
<label><input type="checkbox" name="animal[]" /> インパラ</label>
<label><input type="checkbox" name="animal[]" /> マンドリル</label>
<label><input type="checkbox" name="animal[]" /> チベットスナギツネ</label>
<label><input type="checkbox" name="animal[]" /> 飼育員</label>
<script>
//切替リンクを定数に代入
const toggleLink = document.getElementById('toggleLink');
//チェックボックスのリストを定数に代入
const checkboxes = document.getElementsByName('animal[]');
//リンクがクリックされたときの処理
toggleLink.addEventListener('click', () => {
//1つ目のチェックボックスの状態を取得
const isChecked = checkboxes[0].checked;
//すべてのチェックボックスの状態を切り替える
checkboxes.forEach((checkbox) => {
checkbox.checked = !isChecked;
});
});
</script>ボタンを使う方法とほぼ同じなので、解説は省略します。
でわでわ
コメント