にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

チェックボックス全部を一括ON/OFFする機能を作る方法 [入力フォーム]

チェックボックスがたくさんある場合は、全部のチェックボックスを一括してON/OFFできる機能を用意しておくと便利です。チェックボックスのON/OFFを切り替えるには、checkedプロパティの値にtrueまたはfalseを格納するだけです。ループを使って一括処理させましょう。

チェックボックス全部を一括ON/OFFする機能が用意されていると便利

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

例えば、以下のような感じで。




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

チェックボックス全部を一括ON/OFFする機能を作る方法

ここでは例として、フォーム内に存在する4つのチェックボックスすべてを対象にして一括ON/OFFできる機能を作るHTML+JavaScriptソースを紹介します。
まず、HTMLを使って以下のような入力フォームとチェックボックスがある場合を例にします。

HTMLソース1

<form name="sampleform">
   <p>
      <label><input type="checkbox" value="YES" name="sc1">チェックボックスA</label><br>
      <label><input type="checkbox" value="YES" name="sc2">チェックボックスB</label><br>
      <label><input type="checkbox" value="YES" name="sc3">チェックボックスC</label><br>
      <label><input type="checkbox" value="YES" name="sc4">チェックボックスD</label><br>
   </p>
</form>

上記では、form要素にname属性を加えて「sampleform」という名前を付加しています。
また、チェックボックスを作る各input要素にもname属性を加えて「sc1」~「sc4」の名前を付加しています。(※sample checkboxの略でsc)

さて次に、上記のフォームとチェックボックスを対象にして、すべてのチェックボックスの値をONにもOFFにもできるallcheck関数をJavaScriptで作成します。

JavaScriptソース

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

ソース中に2カ所出てくる「sampleform」は、対象とする入力フォーム(form要素)にname属性で加えた名前です。実際に使う際には、自分で作成したフォーム名に書き換えて下さい。
上記のJavaScriptでは以下のような処理を行っています。

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

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

最後に、上記のallcheck関数を実行して「一括ON」または「一括OFF」を実行させるボタンをHTMLで作ります。

HTMLソース2

<p>
   <input type="button" value="全部ON!" onclick="allcheck(true);">
   <input type="button" value="全部OFF!" onclick="allcheck(false);">
</p>

上記では、ボタンを押した際の動作を指定するonclick属性に、

  • 全部のチェックボックスをONにするボタンでは、allcheck(true);として引数に「true」を、
  • 全部のチェックボックスをOFFにするボタンでは、allcheck(false);として引数に「false」を

指定しています。なお、trueにもfalseにも引用符は不要です。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---