【JavaScript】チェックボックスのチェックを外す方法

本記事の目次

JavaScriptでチェックボックスのチェックを外す
form内の全てのチェックボックスのチェックを外す
まとめ

JavaScriptでチェックボックスのチェックを外す

JavaScriptでチェックボックスのチェックを外すには、チェックボックス要素のcheckedプロパティにfalseを代入します。

< HTML >

<!-- チェック済みのチェックボックスを用意する -->
<input type="checkbox" value="1" id="checkbox" checked>
<label for="checkbox">チェックボックス</label>

< JavaScript >

// 対象のチェックボックス要素を取得する
const checkbox = document.querySelector('#checkbox');

// 取得したチェックボックス要素のcheckedプロパティにfalseを代入する
checkbox.checked = false;

チェックボックス自体や対応するラベル要素をクリックすることでチェック状態を変更することもできますが、別途チェックを外すためのボタンを用意するときなどにJavaScriptを使うと良いでしょう。

チェックボックスのチェックを外すボタンは以下のように実装します。

< HTML >

<!-- チェック済みのチェックボックス -->
<input type="checkbox" value="1" id="checkbox" checked>
<label for="checkbox">チェックボックス</label>

<!-- チェックを外す用のボタン -->
<button　id="button">チェックボックスのチェックを外す</button>

< JavaScript >

// チェックを外す処理
const unCheck = () => {
  const checkbox = document.querySelector('#checkbox');
  checkbox.checked = false;
}

// ボタンにチェックを外す処理を追加する
const button = document.querySelector('#button');
button.onclick = unCheck;

form内の全てのチェックボックスのチェックを外す

JavaScriptでform内の全てのチェックボックスのチェックを外すには、name属性で名前付けしてからfor文を使ってチェックボックス要素のcheckedプロパティにfalseを代入します。

< HTML >

<form name="form">
  <input type="checkbox" value="1" id="check1" name="check" checked>
  <label for="check1">チェックボックス1</label>
  <input type="checkbox" value="2" id="check2" name="check" checked>
  <label for="check2">チェックボックス2</label>
  <input type="checkbox" value="3" id="check3" name="check" checked>
  <label for="check3">チェックボックス3</label>
</form>

< JavaScript >

// name属性で名前付けしたチェックボックス要素を取得する
const checkboxes = document.form.check;

// チェックボックス要素のchecked属性プロパティにfalseを代入する
// for文を使って繰り返し処理を行う
for(checkbox of checkboxes) {
  checkbox.checked = false;
}

一つのチェックボックスのチェックを外す処理を、for文を使って繰り返しています。for文を使うために、name属性で名前付けして要素の取得を簡単・確実にしているわけですね。

次に、ボタンを用意して、クリックした時に全てのチェックボックスのチェックを外すように実装します。

< HTML >

<form name="form">
  <input type="checkbox" value="1" id="check1" name="check" checked>
  <label for="check1">チェックボックス1</label>
  <input type="checkbox" value="2" id="check2" name="check" checked>
  <label for="check2">チェックボックス2</label>
  <input type="checkbox" value="3" id="check3" name="check" checked>
  <label for="check3">チェックボックス3</label>
</form>

<button id="button">全てのチェックボックスのチェックを外す</button>

< JavaScript >

// 全てにチェックボックス要素のチェックを外す処理
// for文を使って繰り返し処理を行う
const unCheckAll = () => {
  const checkboxes = document.form.check;
  for(checkbox of checkboxes) {
    checkbox.checked = false;
  }
}

// ボタンにチェックを外す処理を追加する
const button = document.querySelector('#button');
button.onclick = unCheckAll;