JavaScript | チェックボックスのチェックを付ける、または解除する方法
HTMLフォームにあるチェックボックスのチェックをJavaScriptで付ける、または解除する・外す方法を紹介しています。
HTMLの生成時にcheckedを付けない場合などで、JavaScript側でチェックを付けたい時、他の要素と連動してチェックの付け替えを行いたい場合などに有効です。
See the Pen JavaScript | change all checkbox by yochans (@yochans) on CodePen.
チェックボックスのチェックを付ける
JavaScriptで動的にチェックを付けるサンプルコードです。
サンプルのHTMLではfruitsという名前の属性を持つチェックボックスに3つの選択肢を作成しています。
<p><input type="checkbox" name="fruits" value="apple">apple</p>
<p><input type="checkbox" name="fruits" value="banana">banana</p>
<p><input type="checkbox" name="fruits" value="pine">pine</p>要素のcheckedをtrueにする事でチェックボックスのチェックをJavaScriptで動的に付ける事が可能です。
サンプルでは要素の取得にquerySelector()を利用しています。
厳密に、fruitsというname属性が付与されていてvalue値がbananaのチェックボックスを付ける場合は以下のように指定します。
document.querySelector(`input[type='checkbox'][name='fruits'][value='banana']`).checked = true;他にチェックボックスのvalue値でbananaという値が他に存在しない場合は以下の様にも指定可能です。
document.querySelector(`input[type='checkbox'][value='banana']`).checked = true;例えば、[value=’banana’]という指定でも動作しますが、他のテキストフォームなどで「banana」と入力があった場合に問題が発生するかも知れません。
document.querySelector(`[value='banana']`).checked = true;チェックボックスのチェックを外す
チェックボックスのチェックを動的に外す場合は、checkedに対してfalseを指定します。
サンプルのHTMLではfruitsという名前の属性を持つチェックボックスに3つの選択肢を作成しています。
<p><input type="checkbox" name="fruits" value="apple">apple</p>
<p><input type="checkbox" name="fruits" value="banana">banana</p>
<p><input type="checkbox" name="fruits" value="pine">pine</p>ひとつのチェックボックスに対してチェックを外すのであれば、true時と同じように記述してfakseを指定します。
document.querySelector(`input[type='checkbox'][name='fruits'][value='banana']`).checked = true;複数同時にチェックを付ける、または外す
querySelector()は対象が複数あっても最初のひとつしか取得しません。
複数のチェックボックスのチェックを同時に外したい場合はquerySelectorAll()を利用します。
querySelectorAll()は要素の情報を配列形式で取得しますので、いずれかの繰り返し処理で反復させてそれぞれにcheckedを指定します。
複数同時にチェックを付ける場合
let targets = document.querySelectorAll(`input[type='checkbox'][name='fruits']`);
for (const i of targets) {
i.checked = true;
}複数同時にチェックを外す場合
let targets = document.querySelectorAll(`input[type='checkbox'][name='fruits']`);
for (const i of targets) {
i.checked = false;
}