JavaScript

【JavaScript】チェックボックスのチェックを付ける方法と外す方法

こちらの記事では、JavaScriptでcheckbox(チェックボックス)のチェックを付ける方法と外す方法について解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

inputタグのchecked属性について

HTMLのチェックボックスは属性に何も指定していない状態の場合、最初はチェックボックスが選択されていない状態で表示されます。 しかし、checked属性を付与させることによって意図的に最初からチェックボックスを選択している状態にさせることができます。

このchecked属性をJavaScriptによって制御することで、チェックボックスを全て選択させることや外すことが可能になります。

checked属性の確認

<input type="checkbox" id="sample1" name="sample" value="サンプルテキスト1">
<label for="sample1">サンプルテキスト1</label> <!-- 最初は非選択の状態 -->


<input type="checkbox" id="sample2" name="sample" value="サンプルテキスト2" checked>
<label for="sample2">サンプルテキスト2</label> <!-- 最初からチェック状態 -->

チェックボックスを全て選択する処理の書き方

JavaScriptでチェックボックスを選択状態にさせるには、checkedプロパティにtrueを代入します。
sample.checked = true;

チェックボックスを全て選択する処理の書き方は以下のとおりです。
実行結果に表示されている「全てのフルーツにチェックを入れる」ボタンをクリックすると、表示されている全てのチェックボックスが選択されることが確認できます。

実行結果

好きなフルーツを選択してください

<div>
  <p>好きなフルーツを選択してください</p>
	<input type="checkbox" id="apple" name="fruits" value="りんご">
    <label for="apple">りんご</label>
	<input type="checkbox" id="strawberry" name="fruits" value="いちご">
    <label for="strawberry">いちご</label>
  	<input type="checkbox" id="grape" name="fruits" value="ぶどう">
    <label for="grape">ぶどう</label>
  <button id="check-btn">全てのフルーツにチェックを入れる</button>
</div>

<script>
window.addEventListener('DOMContentLoaded',function(){
  const fruits = document.getElementsByName('fruits'); // ①
  const checkBtn = document.getElementById('check-btn'); // ②
  checkBtn.addEventListener('click', allCheck,false); // ③
  
  function allCheck(){
    for(let i = 0; i < fruits.length; i++){ // ④
      fruits[i].checked = true; // ⑤
    }
  }
});
</script>
コード解説

  1. チェックボックスに付与しているname属性で要素を取得
  2. 全てのチェックボックスを選択したい時にクリックするボタン要素を取得
  3. ②で取得した要素に対してクリックイベントを設定
  4. 全てのチェックボックスに対して、checked属性を付与させるためfor文で個数分処理を繰り返す
  5. 各チェックボックスに対して、checked属性を付与させる

チェックボックスを全て外す処理の書き方

JavaScriptでチェックボックスの選択状態を外すためには、checkedプロパティにfalseを代入します。
sample.checked = false;

チェックボックスを全て外す処理の書き方は以下のとおりです。
実行結果に表示されている「全てのチェックを外す」ボタンをクリックすると、表示されている全てのチェックが外れていることが確認できます。

コードの解説では、checkboxを全て選択する処理の書き方と同じ箇所があるため一部省略しています。

実行結果

現在使っているOSを選択してください

<div>
  <p>現在使っているOSを選択してください</p>
		<input type="checkbox" id="windows" name="os" value="Windows" checked>
    <label for="windows">Windows</label>
		<input type="checkbox" id="mac" name="os" value="Mac" checked>
    <label for="mac">Mac</label>
  	<input type="checkbox" id="linux" name="os" value="Linux">
    <label for="linux">Linux</label>
  <button id="remove-btn">全てのチェックを外す</button>
</div>

<script>
window.addEventListener('DOMContentLoaded',function(){
  const os = document.getElementsByName('os');
  const removeBtn = document.getElementById('remove-btn');
  removeBtn.addEventListener('click', removeFunc,false);
  
  function removeFunc(){
    for(let i = 0; i < os.length; i++){
      os[i].checked = false; // ①
    }
  }
});
</script>
コード解説

  1. 各チェックボックスに対して、checked属性を削除する

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村