【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

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>
コード解説
  • チェックボックスに付与しているname属性で要素を取得
  • 全てのチェックボックスを選択したい時にクリックするボタン要素を取得
  • ②で取得した要素に対してクリックイベントを設定
  • 全てのチェックボックスに対して、checked属性を付与させるためfor文で個数分処理を繰り返す
  • 各チェックボックスに対して、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>
コード解説

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次