• ベストアンサー

チェックボックス設定の方法教えてください

チェックボックスの設定方法を教えてください。 項目1.大分類にチェックすると中分類と小分類にもチェックが入る。 項目2.中分類にチェックすると小分類にもチェックが入る。 項目2の設定はわかりますが、項目1の設定がどうしてもできません。 <script language=javascript> function allCheck(obj){ f=obj.form num=obj.name.replace("b","") for(var i=0;i<f.length;i++){ if(f[i].name=="s"+num) f[i].checked=obj.checked; } } </script> <FORM> <TABLE border=0> <TBODY> <TR> <TD class=color_1 rowSpan=4><INPUT onclick=allCheck(this) type=checkbox name=b1>大分類</TD> <TD class=color_1 rowSpan=4><INPUT onclick=allCheck(this) type=checkbox name=b1>中分類</TD> <TD class=color_1><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_1><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s1>小分類</TD></TR> <TR> <TD class=color_1 rowSpan=3><INPUT onclick=allCheck(this) type=checkbox name=b2>中分類 <P></P></TD> <TD class=color_1><INPUT type=checkbox name=s2>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s2>小分類</TD></TR> <TR> <TD class=color_2><INPUT type=checkbox name=s2>小分類</TD></TR></TBODY></TABLE></FORM> すいませんが、教えて下さい。

質問者が選んだベストアンサー

  • ベストアンサー
  • hkd9001
  • ベストアンサー率48% (99/204)
回答No.1

こんにちは。 JavaScriptをやる前に、ひとつアドバイス。 複数のチェックボックスに同じ名前をつけるのは意味がないのでは? それと、大分類のチェックボックスと、中分類のそれとに同じ名前がついている。 これを修正していただいて、再度ご質問いただけますか。

webnao777
質問者

お礼

ご返事ありがとうございます。 無事解決致しました!! ありがとうございます。 もっとこれから勉強しまーーす!!

その他の回答 (2)

  • ANASTASIAK
  • ベストアンサー率19% (658/3306)
回答No.3

orz...失礼。 2番目を逆にしてしまいました。 <...type=checkbox name=b1>中分類</TD> のところのNAMEを <...type=checkbox name=s1>中分類</TD> ですね。

webnao777
質問者

お礼

ありがとうございます。無事解決致しました。(^^)v 実はこのサイトに投稿したの初めてだったんですよ!!!  ありがとうございました。

  • ANASTASIAK
  • ベストアンサー率19% (658/3306)
回答No.2

構造を変えないでお望みのようにするには2箇所差し替えればOKです。 num=obj.name.replace('b','') を num=obj.name.charAt(1); にする。 次に <...type=checkbox name=s1>中分類</TD> のところのNAMEを <...type=checkbox name=b1>中分類</TD> にする。これで行くと思います。

関連するQ&A

  • 複数のチェックボックスをチェックしたい

    質問させてください。 複数のチェックボックスを項目別に全てチェックするようなjqueryの書き方をご教授いただきたいです。 <table> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />a</li> <li><input type="checkbox" name="" value="" />b</li> <li><input type="checkbox" name="" value="" />c</li> <li><input type="checkbox" name="" value="" />d</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />e</li> <li><input type="checkbox" name="" value="" />f</li> <li><input type="checkbox" name="" value="" />g</li> <li><input type="checkbox" name="" value="" />h</li> </td> </tr> <tr> <td> <input type="checkbox" name="" />まとめてチェック </td> </tr> <tr> <td> <li><input type="checkbox" name="" value="" />i</li> <li><input type="checkbox" name="" value="" />j</li> <li><input type="checkbox" name="" value="" />k</li> <li><input type="checkbox" name="" value="" />l</li> </td> </tr> </table> 上記のようにそれぞれの項目に「まとめてチェック」のチェックボックスがあり、 そこに該当するチェック項目は全てチェックorチェックを外す っという挙動の実装を考えています。 jqueryでやりたいのですが、javascript、jqueryがかなり苦手でいまいちいきません。 ググって $(function(){ $('#all').click(function(){ if(this.checked){ $('#check input').attr('checked','checked'); }else{ $('#check input').removeAttr('checked'); } }); }); このソースを見つけたのですが、これだと一つの項目でしか実装できず 項目分このjqueryを書くのも余り良い書き方だと思えません。 どなたか、ご教授お願いいたします。

  • チェックボタンの制御方法

    チェックボタンの制御方法で 下記のようなことがやりたいです。 (1)【全ての学校】選択時 【小学校】と【中学校】の全て disabledのままでチェックをセット、ボタンdisabled (2)【小学校】選択時 【中学校】disabledのままでチェックを解除、ボタンdisabled (3)【中学校】選択時 【小学校】disabledのままでチェックを解除、ボタンdisabled もうちょっとだと思うのですが... なかなかうまく出来ないのでよろしくお願いします。 <html> <head> <title></title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>A小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>B小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>C小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>A中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>B中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>A中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>B中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • ラジオボタンが選択によるチェックボックス・ボタンの制御方法

    お世話になります。 やりたい事 (1)ラジオボタン【小学校】:小学校のみ入力可 (2)ラジオボタン【中学校】:中学校(市立・私立)のみ入力可 (3)ラジオボタン【全ての学校】:小中すべて入力可 (1)と(2)は動作していると思います。 (3)を実現するにはどうすればいいのでしょうか? よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>A小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>B小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>C小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>A中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>B中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>A中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>B中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>C中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • チェックボックスのチェック処理

    HTMLでボタン押下時にチェックしたいことがあります。 ■カテゴリーA~Cで、カテゴリー毎に選択できるのは一つのみ  (例)「A1・あ」と「A2・お」が選択時はNG ■カテゴリーは最大2つまで選択可能  (例)「A1・い」と「C1・さ」が選択時はOK    「A1・い」と「B2・く」と「C1・さ」が選択時はNG <html> <head> </head><body> <form> <table border="1"> <tr> <td>A1</td> <td><input type="checkbox" name="chk1" value="1">あ</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1">い</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1">う</td> </tr> <tr> <td>A2</td> <td><input type="checkbox" name="chk1" value="1">え</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1">お</td> </tr> <tr> <td>B1</td> <td><input type="checkbox" name="chk1" value="1">か</td> </tr> <tr> <td>B2</td> <td><input type="checkbox" name="chk1" value="1">く</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1">け</td> </tr> <tr> <td>C1</td> <td><input type="checkbox" name="chk1" value="1">さ</td> </tr> <tr> <td>C2</td> <td><input type="checkbox" name="chk1" value="1">し</td> </tr> <tr> <td> </td> <td><input type="checkbox" name="chk1" value="1">す</td> </tr> </table> <input type="submit" value="チェック"> </form> </body> </html> すみませんがよろしくお願いします。

  • チェックボックスの全選択/解除について

    お尋ねします。 チェックボックスの全選択/解除について 1画面にチェックボックスのグループが複数(store、item)あります。 下記のソースだと【store】の全選択を押下すると【store】【item】両方とも 全選択状態になります。 【store】の全選択/全解除は【store】のみ 【item】の全選択/全解除は【item】のみにしたいのですが どのようにするとよろしいのでしょうか? よろしくお願いします。 <SCRIPT TYPE="text/javascript"> <!-- function allcheck(targetForm,flag){  for(n=0;n<=targetForm.length-1;n++){   if(targetForm.elements[n].type == "checkbox"){    targetForm.elements[n].checked = flag;   }  } } --> </SCRIPT> <table width="70%" align = "center" cellspacing="0"> <form action="confirm.php" method="post" target="_blank"> <tr> <td align="center"> <input type="checkbox" name="store[]" value="1" />A店<br/> <input type="checkbox" name="store[]" value="2" />B店<br/> <input type="checkbox" name="store[]" value="3" />C店<br/> <input type="checkbox" name="store[]" value="4" />D店<br/> <input type="checkbox" name="store[]" value="5" />E店<br/> <input type="button" value="全選択" onClick="allcheck(this.form,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this.form,false)"/> </td> <td align="center"> <input type="checkbox" name="item[]" value="1" />項目1<br/> <input type="checkbox" name="item[]" value="2" />項目2<br/> <input type="checkbox" name="item[]" value="3" />項目3<br/> <input type="checkbox" name="item[]" value="4" />項目4<br/> <input type="checkbox" name="item[]" value="5" />項目5<br/> <input type="button" value="全選択" onClick="allcheck(this.form,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this.form,false)"/> </td> </tr> <tr align="center"> <td colspan="4"> <input type="submit" name="con" value="確認"> </td> </tr> </form> </table>

    • 締切済み
    • PHP
  • 何番目のクラスか取得するには

    <table> <tr> <td> りんご </td> <td colspan="3" class="class_td"> <input name="color[]" value="1" type="checkbox"> </td> </tr> <tr> <td> みかん </td> <td colspan="3" class="class_td"> <input name="color[]" value="1" type="checkbox"> </td> </tr> <tr> <td> ぶどう </td> <td colspan="3" class="class_td"> <input name="color[]" value="1" type="checkbox"> </td> </tr> </table> チェックボックスにチェックを入れた場合、何番目のclass_tdに属するかを取得したいです。 例えば、みかんにチェックを入れた場合、2と取得できるようにしたいです。 $(this).index('.class_td')では-1となってしまいます。 ご教示頂けますと幸いです。 よろしくお願いいたします。

  • チェックボックスの全選択・全解除を一つにまとめたい

    http://shoyu-ramen23.jugem.jp/?eid=184を参考にチェックボックスの全選択・全解除をつけました。 ただし、上記のサンプルは全選択ボタン、全解除ボタンと二つに分かれている為、これを一つにしたいと思ったのですが、どうすればできるかわからなかったので、 アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 【やりたい事】 1. 最初は「全て選択」ボタンのみ表示したいです。 2. 「全て選択」ボタンをクリックすると、「全て選択」ボタンが消え、代わりに「全て解除」ボタンを表示したいです(1回目,3回目,5回目・・・のクリックはこの動作)。 2. 「全て解除」ボタンをクリックすると、「全て解除」ボタンが消え、代わりに「全て選択」ボタンを表示したいです(2回目,4回目,6回目・・・のクリックはこの動作)。 【ソースコード】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>タイトル</title> <script type="text/javascript"> function allcheck(targetForm,flag){ for(n=0;n<=targetForm.length-1;n++){ if(targetForm.elements[n].type == "checkbox"){ targetForm.elements[n].checked = flag; } } } </script> </head> <body> <form action="test.php" method="post"> <table> <tr> <td> <input type="button" onclick="allcheck(this.form,true)" value="全て選択"><br /> <input type="button" onclick="allcheck(this.form,false)" value="全て解除"></td> </tr> <tr> <td><input type="checkbox" value="1" id="check1" name="data[check1]"></td> </tr> <tr> <td><input type="checkbox" value="1" id="check2" name="data[check2]"></td> </tr> <tr> <td><input type="checkbox" value="1" id="check3" name="data[check3]"></td> </tr> <tr> <td><input type="checkbox" value="1" id="check4" name="data[check4]"></td> </tr> <tr> <td><input type="checkbox" value="1" id="check5" name="data[check5]"></td> </tr> </table> </form> </body> </html> 以上、よろしくお願いします。

  • JavaScript チェックボックスで指定の箇所をチェックする方法

    初めての投稿ですが、よろしくお願いします。m(_ _)m 現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。 一覧表の行or列の先頭にあるチェックボックスを選択すると 選択された行or列にあるチェックボックスを全てチェックされ、 先頭のチェックボックスを外すと全て解除される。 (例:横A□チェックボックスを選択すると右にある全てのチェックボックスが選択される。チェックを外すと右にある全てのチェックボックスが未選択になる。) という事を行いたいと思い、色々調べてみたのですが、 発見できませんでしたので質問させていただきました。 どうかお助けください。m(>_<)m -- <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> </HEAD> <BODY> <form name="F1"> <table border="1"> <tr> <td>一覧</td> <td>縦A<br><input type="checkbox" id="" /></td> <td>縦B<br><input type="checkbox" id="" /></td> <td>縦C<br><input type="checkbox" id="" /></td> </tr> <tr> <td>横A<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> <tr> <td>横B<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> <tr> <td>横C<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> </table> </form> </BODY> </HTML>

  • チェックした行の色を変える

    簡単にできそうかなと思ってやってみたら、泥沼状態。 チェックボックスにチェック入れたときにその行をハイライトさせ、チェックはずすと元に戻るようにしたいのですが。 【チェック入れた時の状態】 <TABLE BORDER="1"> <TR> <TD><INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox"></TD> <TD></TD> </TR> <TR BGCOLOR="red"> <TD><INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox" CHECKED></TD> <TD></TD> </TR> <TR> <TD><INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox"></TD> <TD></TD> </TR> </TABLE>

  • チェックボックスが複数ある場合の値取得について

    【javascript】チェックボックスが複数ある場合の値取得について こんにちは。 チェックボックスのグループが複数ある場合に、値取得のロジックをチェックボックスのグループ毎に記述せず、 まとめて1つのロジックで取得できる記述方法はありますでしょうか? 色々と検索しましたが、解決できず何かよい方法があれば教えて頂けないでしょうか。 よろしくお願い致します。 ■やりたいこと ・チェックボックスの値取得の記述を1つにまとめたい。 サンプルソースでは、チェックボックスのグループが3つで、チェックボックスの値取得のソースも3つ記述しています。 チェックボックスのグループを50個設置すると、50回値取得のソースを記述することになってしまうので、1つの記述にまとめたいです。 ■サンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <style type="text/css"> table {border: solid;} td{width:150px;} </style> <script type="text/javascript" language="JavaScript"><!-- function setVal(obj) { var formname = obj.form.name; var radioname = obj.getAttribute("Name"); document.forms[formname]["h"+radioname].value = $("input:radio[name='" + radioname + "']:checked").val(); } // --></script> <script type="text/javascript" language="JavaScript"><!-- function disp(obj){ var naiyo02=""; var naiyo03=""; var naiyo04=""; var flag = 0; //チェックボックス1の値 for(i=0; i<document.forms["test"].checkbox02.length; i++){ if(document.forms["test"].checkbox02[i].checked){ naiyo02 = naiyo02 + "■本日は月曜日:"+ document.forms["test"].hradio00.value + ' ' + document.forms["test"].checkbox02[i].value + '\n'; flag = flag+1; }} if(flag == 0){ naiyo02 = "■本日は月曜日:"+ document.forms["test"].hradio00.value + ' ' + "未選択"+ '\n'; } //チェックボックス2の値 for(i=0; i<document.forms["test"].checkbox03.length; i++){ if(document.forms["test"].checkbox03[i].checked){ naiyo03 = naiyo03 + "■本日は火曜日:"+ document.forms["test"].hradio00.value + ' ' + document.forms["test"].checkbox03[i].value + '\n'; flag = flag+1; }} if(flag == 0){ naiyo03 = "■本日は火曜日:"+ document.forms["test"].hradio00.value + ' ' + "未選択"+ '\n'; } //チェックボックス3の値 for(i=0; i<document.forms["test"].checkbox04.length; i++){ if(document.forms["test"].checkbox04[i].checked){ naiyo04 = naiyo04 + "■本日は水曜日:"+ document.forms["test"].hradio00.value + ' ' + document.forms["test"].checkbox04[i].value + '\n'; flag = flag+1; }} if(flag == 0){ naiyo04 = "■本日は水曜日:"+ document.forms["test"].hradio00.value + ' ' + "未選択"+ '\n'; } str = naiyo02 +'\n'+ naiyo03 +'\n'+ naiyo04 +'\n'; alert(str); } // --></script> </head> <body> <FORM name="test"> <table> <tr> <td class="c"> ■天気 </td> <td class="n" > <label for="radiocheck04"><input type="radio" id="radiocheck04" name="radio00" value="晴れ" onClick="setVal(this);">晴れ</label> <label for="radiocheck05"><input type="radio" id="radiocheck05" name="radio00" value="曇り" onClick="setVal(this);">曇り</label> <input type="hidden" name="hradio00" value="未入力"><br> </td> </tr> </table> <table> <tr> <td class="c" > ■月曜日<br> (複数選択可) </td> <td class="n" > <input type="checkbox" name="checkbox02" value="さくら">さくら<br> <input type="checkbox" name="checkbox02" value="まっちゃ">まっちゃ<br> <input type="checkbox" name="checkbox02" value="不明"> 不明<br> </td> </tr> </table> <table> <tr> <td class="c" > ■火曜日<br> (複数選択可) </td> <td class="n" > <input type="checkbox" name="checkbox03" value="バニラ">バニラ<br> <input type="checkbox" name="checkbox03" value="不明"> 不明<br> </td> </tr> </table> <table> <tr> <td class="c" > ■火曜日<br> (複数選択可) </td> <td class="n" > <input type="checkbox" name="checkbox04" value="いちご">いちご<br> <input type="checkbox" name="checkbox04" value="ミント">ミント<br> <input type="checkbox" name="checkbox04" value="バニラ">バニラ<br> <input type="checkbox" name="checkbox04" value="不明"> 不明<br> </td> </tr> </table> <input type="button" value="確認" onclick="javascript:disp(this.form)"> </Form> <body> </html>