スポンサーサイト

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


上記の広告は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つの時とそれ以外の数に対応できるよ。
スポンサーサイト

キター C# in Depth

2009年11月07日 【 020.C#


C# in DepthC# in Depth
(2008/04)
Jon Skeet

商品詳細を見る


ようやく「C# in Depth」が届いたよ!(^0^)/
いやー、妥協もへったくれもなく、全部英語だわwww

でも2ページに1回くらいはプログラムが出てくるので
なんとかなるかな。

まぁページ数も多いし、C#エッセンシャルズを読み終えていないんで
ちまちまとやっていくよ。

なんか作るものとか目標があると良いんだがなぁ・・・

C#の本 その2

2009年11月01日 【 020.C#


先日、この記事で紹介したC#の本だけど
注文してしまったよ。

C# in DepthC# in Depth
(2008/04)
Jon Skeet

商品詳細を見る


届くのはまだ2週間くらい先なので
それまでに予習しておこうと
神田の三省堂で洋書の参考書を立ち読みした後、
この2冊を買ってきた。(日本語だけどw)

C#の絵本C#の絵本
(2008/02/05)
(株)アンク

商品詳細を見る


C#エッセンシャルズ 第2版C#エッセンシャルズ 第2版
(2002/07)
ベン アルバーリブラッド メリル

商品詳細を見る




ちなみに洋書はこれ(↓)を特に多めに立ち読みしていたんだけど

Regular Expressions CookbookRegular Expressions Cookbook
(2009/06/04)
Jan GoyvaertsSteven Levithan

商品詳細を見る


いや~、難しいわ。
・・・・・・・・・・・・・・・・・・・英語がw。

C# in Depth はちゃんと読めるだろうか・・・^^;

C# の本

2009年10月27日 【 020.C#


ちょっと買おうか迷っている参考書があってね。

C# in DepthC# in Depth
(2008/04)
Jon Skeet

商品詳細を見る



これ、1年位前の本だけど結構評判がいいみたいなんだ。
世界中のamazonで検索してみたけど★5つの割合が高すぎ。
あ、当然日本語ではないので注意。


それにしても日本のamazonって洋書のストックないよなぁ・・・メンドい。
プロフィール

Author:らんばーど





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

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

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

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

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

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

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

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

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

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

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

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