5個のうち3個しかチェックできないようにする


動作ブラウザ 【 IE:3.0  NN:2.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows - - -
Macintosh - - -
UNIX - - - - - - - -
Dreamcast - - - - - - - - - - -

ポイント fOBJ = document.myFORM; count = 0; for (i=1; i<=5; i++) if (fOBJ["CB"+i].checked) count++; if (count > 3) { alert("3個以上チェックできません"); fOBJ["CB"+n].checked = false; }
説  明 チェックボックスを特定の数しかチェックできないようにするにはonClickイベントでクリックを検知しfor命令を使っていくつチェックされているかを調べます。チェックボックス名を"CB1"、"CB2"、"CB3"....のように名前+番号にしておけば「document.フォーム名[名前"+番号].checked」でチェックボックスの読み込み、設定ができます。
サンプル <html> <head> <title>5個のうち3個しかチェックできないようにする</title> <script Language="JavaScript"><!-- function check(n) { fOBJ = document.myFORM; count = 0; for (i=1; i<=5; i++) if (fOBJ["CB"+i].checked) count++; if (count > 3) { alert("3個以上チェックできません"); fOBJ["CB"+n].checked = false; } } // --></script> </head> <body> <form name="myFORM"> <input type="checkbox" name="CB1" onClick="check(1)">チェック1<br> <input type="checkbox" name="CB2" onClick="check(2)">チェック2<br> <input type="checkbox" name="CB3" onClick="check(3)">チェック3<br> <input type="checkbox" name="CB4" onClick="check(4)">チェック4<br> <input type="checkbox" name="CB5" onClick="check(5)">チェック5<br> </form> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA