スポンサーサイト

--年--月--日 【 スポンサー広告


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScriptでチェックボックスの全チェックON/OFF

2010年02月27日 【 020.JavaScript


チェックボックスのON/OFFを
ボタン1回押下でまとめて行いたい時があると思う。

ということでこういうのを
JavaScriptで書いてみた。


<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" Content="text/html; charset=x-sjis">
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>CHECKBOX TEST</TITLE>

<SCRIPT Language="JavaScript">
<!--
function SelectBox()
{
  for(var i=0; i < document.FORM1.BOX1.length; i++)
  {
   document.FORM1.BOX1[i].checked = true;
  }
}
function CancelBox()
{
  for(var i=0; i < document.FORM1.BOX1.length; i++)
   {
    document.FORM1.BOX1[i].checked = false;
   }
}
// -->
</SCRIPT>

</HEAD>
<BODY>
<FORM METHOD=POST NAME=FORM1>
<B>カレーのトッピングは?</B><HR>
<INPUT NAME="BOX1" TYPE="CHECKBOX">チーズ<BR>
<INPUT NAME="BOX1" TYPE="CHECKBOX">キノコ<BR>
<INPUT NAME="BOX1" TYPE="CHECKBOX">エッグ
<HR>
<INPUT NAME="BUTTON1" TYPE="BUTTON" VALUE="ALL SELECT" onClick="SelectBox();">
<INPUT NAME="BUTTON2" TYPE="BUTTON" VALUE="ALL CANCEL" onClick="CancelBox();">
</FORM>
</BODY>
</HTML>


【パターン1】
jscheck1.png

実行すると、この場合はうまく動くのだが
実はこれは隠れたバグを含んでいる。


このパターンはどうだろうか?

【パターン2】
jscheck2.png

3択でなく1択の場合。
この時は「ALL SELECT」を押下してもチェックボックスにチェックが入らない。
「ALL CANCEL」も同様にチェックが解除されないのだ。


どこがマズいのか??
トッピングが一番おかしいだろ・・・


alert(document.FORM1.BOX1.length);
として内容を確認してみると
【パターン1】では「3」と返ってくるのに対し
【パターン2】では「1」ではなく「undefined」となる。
要するに、1つしかない場合は配列と考えない、というわけだね。
・・・めんどくさい仕様だ・・・・orz


JSPなどでループを回しながらタグを作成していくタイプの場合、
状況によってはチェックボックスが
1つだったり3つだったり9つだったりと いろいろあると思う。
なので汎用的にするためには、
1つの時にうまく分岐するよう細工が必要、というわけ。


<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" Content="text/html; charset=x-sjis">
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>CHECKBOX TEST</TITLE>

<SCRIPT Language="JavaScript">
<!--
function SelectBox()
{
  if(document.FORM1.BOX1.length)
  {
    //2つ以上
    for(var i=0; i < document.FORM1.BOX1.length; i++)
    {
     document.FORM1.BOX1[i].checked = true;
    }
  }
  else if(document.FORM1.BOX1.checked == false)
  {
    //1つ
    document.FORM1.BOX1.checked = true;
  }
}
function CancelBox()
{
  if(document.FORM1.BOX1.length)
  {
    //2つ以上
    for(var i=0; i < document.FORM1.BOX1.length; i++)
    {
     document.FORM1.BOX1[i].checked = false;
    }
  }
  else if(document.FORM1.BOX1.checked == true)
  {
    //1つ
    document.FORM1.BOX1.checked = false;
  }
}
// -->
</SCRIPT>

</HEAD>
<BODY>
<FORM METHOD=POST NAME=FORM1>
<B>カレーのトッピングは?</B><HR>
<INPUT NAME="BOX1" TYPE="CHECKBOX">チーズ<BR>
<INPUT NAME="BOX1" TYPE="CHECKBOX">キノコ<BR>
<INPUT NAME="BOX1" TYPE="CHECKBOX">エッグ
<HR>
<INPUT NAME="BUTTON1" TYPE="BUTTON" VALUE="ALL SELECT" onClick="SelectBox();">
<INPUT NAME="BUTTON2" TYPE="BUTTON" VALUE="ALL CANCEL" onClick="CancelBox();">
</FORM>
</BODY>
</HTML>



こうすることで1つの時とそれ以外の数に対応できるよ。
スポンサーサイト
プロフィール

Author:らんばーど





-*-*-*-*-*-*-*-*-*-*-*-*-

広く浅く、内容薄く。
自分のペースで楽しく学ぶ。

あなたに役立つ情報が
奇跡的にここで見つかれば
嬉しいですね。
※拍手歓迎(笑)

-*-*-*-*-*-*-*-*-*-*-*-*-

【64bit環境】
Windows7 Professional
Core i7-3930K C2-Step
16GB RAM

【32bit環境】
WindowsXP Professional
Core2 Duo E8600 3.33GHz
4GB RAM

-*-*-*-*-*-*-*-*-*-*-*-*-

【音楽の目指すポジション】

自分の気持ちを
素直に表現できる、
そんな音楽が
作れるようになりたい 

-*-*-*-*-*-*-*-*-*-*-*-*-

記述内容の正確性、
および動作保障等に関して
一切責任をもちません。

カテゴリ
ブログ内検索
最新記事
リンク
月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。