Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:48.

チェックボックス全部を一括ON/OFFする

フォーム内にたくさんのチェックボックスが存在する場合、そのすべてを一括してON/OFFできるボタンを用意しておくと便利な場合があります。例えば、データの一覧を表示していて、削除対象にチェックを入れさせるような場面では、全部を一気に選択(ONに)できると便利そうです。
例えば、以下のような感じで。





JavaScriptでは、特定のフォーム内に存在するチェックボックスのON/OFFを切り替えることができます。ループを使って全部のチェックボックスに対して処理を行えば、簡単に全部のON/OFFを一括して切り替えることができます。

これを実現するJavaScriptソースは、以下のような感じです。(ONにもOFFにもできるallcheck関数を作成しています。)

<script type="text/javascript"><!--
   function allcheck( tf ) {
      var ElementsCount = document.sampleform.elements.length; // チェックボックスの数
      for( i=0 ; i<ElementsCount ; i++ ) {
         document.sampleform.elements[i].checked = tf; // ON・OFFを切り替え
      }
   }
// --></script>

ソース中に2カ所出てくる「sampleform」は、対象とするフォーム(form要素)に加えた名称です。name属性を使って指定します。ここは、自分で作成したフォーム名に書き換える必要があります。(下記のサンプルHTMLをそのまま使う場合は書き換え不要ですが。)

最初に「document.sampleform.elements.length」で要素の数をカウントしています。ループを使って処理するために数を数えておく必要があるからです。数は、変数ElementsCountに格納されます。
次にfor文を使って、要素の数だけループさせています。
ループの中では、チェックボックスのチェックをON/OFFさせています。チェック状態を切り替えるには、checkedプロパティの値を変更するだけです。「true」を入れればチェックが入り、「false」を入れればチェックが外れます。

なお、チェックをONにするのかOFFにするのかは、ここで作成している「allcheck」関数の引数で受け取るようにしています(変数tf)。これによって、「全部ON」と「全部OFF」の両機能を1つの関数で実現しています。

次に、HTMLソースを以下のように書きます。(ここでは、チェックボックスを4つ作成しています。)

<form name="sampleform">
   <p>
   <input type="checkbox" value="1" name="sc1" id="sc1" /><label for="sc1">チェックボックスA</label><br />
   <input type="checkbox" value="1" name="sc2" id="sc2" /><label for="sc1">チェックボックスB</label><br />
   <input type="checkbox" value="1" name="sc3" id="sc3" /><label for="sc1">チェックボックスC</label><br />
   <input type="checkbox" value="1" name="sc4" id="sc4" /><label for="sc1">チェックボックスD</label><br />
   </p>
   <p>
      <input type="button" value="全部ON!" onclick="allcheck(true);" />
      <input type="button" value="全部OFF!" onclick="allcheck(false);" />
   </p>
</form>

form要素には必ずname属性を使ってフォーム名を指定しておきます。そうしないと、JavaScriptから扱えませんから。上記では「sampleform」という名称を付加していますが、名称は自由に決定できます。

最後にボタンを2つ作成して、1つは「全部ON」ボタン、もう1つは「全部OFF」ボタンにしています。onclick属性を使って、先ほどJavaScriptソースで作成した関数を呼び出しています。
このとき、引数に「true」を与えれば「全部ON」、「false」を与えれば「全部OFF」になります。つまり、「allcheck(true);」で全部ON、「allcheck(false);」で全部OFFです。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど