JavaScript

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

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

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

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

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アクセスランキング にほんブログ村