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 はどうしたらいいでしょうか?

回答の条件
  • URL必須
  • 1人20回まで
  • 登録:2007/04/11 11:06:48
  • 終了:2007/04/18 11:10:03

回答(5件)

id:F-15X No.1

F-15X回答回数111ベストアンサー獲得回数132007/04/11 11:09:40

id:zachouR

ありがとうございます。

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

すいません。

2007/04/11 11:17:13
id:SALINGER No.2

SALINGER回答回数3454ベストアンサー獲得回数9692007/04/11 11:29:41

ポイント20pt

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

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

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

id:zachouR

ありがとうございます!

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

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

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

2007/04/12 10:53:46
id:studioes No.3

studioes回答回数522ベストアンサー獲得回数612007/04/11 11:35:47

ポイント20pt

<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/

id:zachouR

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

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

ありがとうございます!

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

2007/04/12 10:54:36
id:aside No.4

aside回答回数339ベストアンサー獲得回数312007/04/11 15:33:09

ポイント20pt

<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/

id:zachouR

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

非常に助かります!

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

2007/04/12 10:56:00
id:Mook No.5

Mook回答回数1312ベストアンサー獲得回数3912007/04/11 19:47:25

ポイント20pt

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

id:zachouR

おおお!

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

ありがとうございます!

2007/04/12 10:55:19
  • id:F-15X
    <script type="text/javascript">
    <!--
    function checkOnOff(onoff){
    var chkObj = document.getElementsByTagName("input");
    for (var i=0; i<chkObj.length; i++){
    if(chkObj[i].type=="checkbox"){
    if (onoff == 0){
    chkObj[i].checked = false;
    }else{
    chkObj[i].checked = true;
    }
    }
    }
    }
    // -->
    </script>
    <input type="button" value="オン" onClick="checkOnOff(1)">
    <input type="button" value="オフ" onClick="checkOnOff(0)">
  • id:Mook
    あらら、コメントがあったんですね。

    私の回答はF-15Xさんのコメントに近いものなので開封不要です。
  • id:Mook
    見た目は違いますが、コアの部分は F-15X さんや、aside さんのと同じものです。
    恥ずかしながら、私のコードにはバグもありました。

     for ( i=0; i<document.form01.length-1; i++ ){

     for ( i=0; i<document.form01.length; i++ ){
    ですね。

    整理すれば、
    function checkAll(flag)
    {
      for ( i=0; i<document.form01.length-1; i++ ){
        if ( document.form01.elements[i].type == "checkbox" ) {
          document.form01.elements[i].checked = flag;
        }
      }
    }

      <input type="button" value="ALL CHECK ON" onclick="checkAll(true)">
      <input type="button" value="ALL CHECK OFF" onclick="checkAll(false)">
    とでもした方が、スマートかもしれません。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません