2007年5月30日(水) 14時10分09秒 [入力フォーム]

チェックボックス全部を一括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です。