人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascript に関する質問です。
以下のチェックボックスがあります。

<form name="form01" action="page.cgi" method="post">
<input type="checkbox" name="check_1" value="1" checked>
<input type="checkbox" name="check_2" value="1" checked>
<input type="checkbox" name="check_3" value="1" checked>
</from>

このようにしていた場合、
「すべてのチェックボックスをONにする」
「すべてのチェックボックスをOFFにする」
という、Javascript はどうしたらいいでしょうか?

●質問者: zachouR
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript ON チェックボックス
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● F-15X
●20ポイント

みんなのプログラミング無料講座

すべてのチェックボックスのチェック状態を切り替える

サンプル

◎質問者からの返答

ありがとうございます。

しかし、この場合はチェックボックスのnameがばらばらなので、使えないのです。

すいません。


2 ● SALINGER
●20ポイント

似たような質問が以前にもありまして

http://q.hatena.ne.jp/1175335903

私の回答はあんまり参考になりませんが、2の方の回答は参考になるでしょう。

◎質問者からの返答

ありがとうございます!

参考にさせていただきます。しかし、checkAll(new Array('b[0]','b[1]','b[2]','b[3]'));

をひとつ、ひとつ、指定するのはちょっとだけきついですね、、、。

ありがとうございました!


3 ● studioes
●20ポイント

<Script language="JavaScript"><!--</p> <p>checkboxes = new Array('c1','c2','c3');</p> <p>function checkAll(){</p> <p>for(i=0; i<checkboxes.length; i++){</p> <p>document.getElementById(checkboxes[i]).checked = true;</p> <p>}</p> <p>}</p> <p>function unCheckAll(){</p> <p>for(i=0; i<checkboxes.length; i++){</p> <p>document.getElementById(checkboxes[i]).checked = false;</p> <p>}</p> <p>}</p> <p>//--></Script>


<form>

<INPUT type="checkbox" name="check1" id="c1" value="beer">ビール

<INPUT type="checkbox" name="check2" id="c2" value="shochu">焼酎

<INPUT type="checkbox" name="check3" id="c3" value="sake">日本酒

<INPUT type="button" value="全てON" onclick='checkAll()'>

<INPUT type="button" value="全てOFF" onclick='unCheckAll()'>

</form>

こんなのはいかが?

INPUTタグにIDを付けて、checkboxes = new Array('c1','c2','c3');の部分で、そのID名を書き連ねておけばOK

http://q.hatena.ne.jp/

◎質問者からの返答

checkboxes = new Array('c1','c2','c3');

は、すべてかかなければいけないのでしょうか?

ありがとうございます!

参考にさせていただきます。


4 ● aside
●20ポイント

<script type="text/javascript"></p> <p><!--</p> <p>function chkAll(flg){</p> <p> var oInput = document.getElementsByTagName("input");</p> <p> for (var i=0; i<oInput.length; i++) {</p> <p> if(flg && oInput[i].type == "checkbox"){</p> <p> oInput[i].checked = true;</p> <p> } else {</p> <p> oInput[i].checked = false;</p> <p> }</p> <p> }</p> <p>}</p> <p>// --></p> <p></script>

<input type="button" value="On" onClick="chkAll(true)">

<input type="button" value="Off" onClick="chkAll(false)">

<form name="form01" action="page.cgi" method="post">

<input type="checkbox" name="check_1" value="1" checked>

<input type="checkbox" name="check_2" value="1" checked>

<input type="checkbox" name="check_3" value="1" checked>

</from>

でおk?

http://www.hatena.ne.jp/

◎質問者からの返答

簡単にいれられそうですね!

非常に助かります!

ありがとうございました!


5 ● Mook
●20ポイント

form 内のすべてのチェックボックスを変更するなら、下記のような感じでどうでしょうか。

<html>
<head>
<script language="JavaScript"><!--

// 全てのチェックボックスをオン
function checkAll()
{
 for ( i=0; i<document.form01.length-1; i++ ){
 if ( document.form01.elements[i].type == "checkbox" ) {
 document.form01.elements[i].checked = true;
 }
 }
}
// 全てのチェックボックスをオフ
function checkClear()
{
 for ( i=0; i<document.form01.length-1; i++ ){
 if ( document.form01.elements[i].type == "checkbox" ) {
 document.form01.elements[i].checked = false;
 }
 }
}
// --></script>

</head>
<body>
<form name="form01">
 <input type="checkbox" name="check_1">サンプル1<br>
 <input type="checkbox" name="check_2">サンプル2<br>
 <input type="checkbox" name="check_3">サンプル3<br>
 <input type="checkbox" name="check_4">サンプル4<br>
 <input type="button" name="allCheck" value="すべてにチェックをする" onclick="checkAll()">
 <input type="button" name="allClear" value="すべてのチェックをはずす" onclick="checkClear()">
</form>
</body>
</html>

http://pzxa85.hp.infoseek.co.jp/www/wwwjsfor.htm

◎質問者からの返答

おおお!

これが、いちばんベストな感じです!

ありがとうございます!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ