複数のチェックボックスをチェックしたい jqueryの書き方

このQ&Aのポイント
  • 複数のチェックボックスを項目別にまとめてチェックする方法をjqueryで実装する方法について教えてください。
  • 現在、一つの項目でしか実装できないjqueryのコードを見つけたが、複数の項目に対応する方法がわかりません。
  • 質問者はjqueryやjavascriptが苦手で、効率的な実装方法についてアドバイスを求めています。
回答を見る
  • ベストアンサー

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

質問させてください。 複数のチェックボックスを項目別に全てチェックするような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を書くのも余り良い書き方だと思えません。 どなたか、ご教授お願いいたします。

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

  • ベストアンサー
  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.1

まず、li が ul ないし olに囲まれていないのがよくないです。 きちんと記述しないとブラウザによっては崩れますのでね。javascriptも正常に動きません。 jQueryは要素の指定の方法がいろいろあるので、それだけ体得すれば割といけます。 もし、お書きになったようなhtmlの場合なら、 全てチェックのcheckboxにclass="all"を追加して、以下のようなjQueryを書けばよいと思います。 未検証です。 $(function(){ $('.all').click(function(){ //対象のチェックボックスはclassにallを指定したチェックボックスの //親のtrの次のtr内にあるinput要素 var $target_input = $(this).parents('tr').next().find('input'); if(this.checked){ $target_input.attr('checked','checked'); }else{ $target_input.removeAttr('checked'); } }); });

paranoaman
質問者

お礼

回答いただきありがとうございます! すみません、急いで作成してしまいulが抜けていました。 メソッドチェーンの概念がまだしっかり分かっておらず非常に参考になりました! ベストアンサーに選ばせていただきます、このたびはありがとうございました!

関連するQ&A

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

    簡単にできそうかなと思ってやってみたら、泥沼状態。 チェックボックスにチェック入れたときにその行をハイライトさせ、チェックはずすと元に戻るようにしたいのですが。 【チェック入れた時の状態】 <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>

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

    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> すみませんがよろしくお願いします。

  • チェックボックスとの連動

    白黒とカラーの項目を連動させています。例えば白黒のチェックをはずしてカラーにチェックを入れるとすでに白黒で選択してた場合、金額が合計に加算されてしまいます。チェックをはずした時点で選択項目の金額をリセットさせたいのですが解決方法が見つかりません。Javascript勉強中で正直よくわかっていません。下記スクリプトもあっちこっち調べながら組み合わせたものです。解決策をいただけると助かります。よろしくお願い致します。 <script language="javascript"> <!-- n_table1 = new Array(0,100,200); n_table2 = new Array(0,300,400); function keisan(obj) { var outStr=""; var total=0; total = total + n_table1[document.form1.koumoku1.selectedIndex] * document.form1.kazu1.value; total = total + n_table2[document.form1.koumoku2.selectedIndex] * document.form1.kazu1.value; outStr = total; document.form1.goukei.value=eval(outStr); } function ctrl_check01(check02_checked) { document.getElementsByName("idcheck2")[0].disabled = check02_checked; document.getElementsByName("koumoku2")[0].disabled = check02_checked; } function ctrl_check03(check04_checked) { document.getElementsByName("idcheck")[0].disabled = check04_checked; document.getElementsByName("koumoku1")[0].disabled = check04_checked; } // --> </script> <form name="form1" METHOD="POST"> <table cellspacing="0" cellpadding="8" border="1" bordercolor="#666"> <tr> <td>白黒</td> <td><input type=checkbox name="idcheck" id="idcheck" onClick="ctrl_check01(this.checked);"> 白黒 <select name="koumoku1"> <option>選択 <option>--------------A(100) <option>--------------B(200) </select> </tr> <tr> <td>カラー</td> <td><input type=checkbox name="idcheck2" id="idcheck2" onClick="ctrl_check03(this.checked);"> カラー <select name="koumoku2"> <option>選択 <option>--------------A(300) <option>--------------B(400) </select></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <td>総枚数</td> <td><input type="text" name="kazu1" size="8" maxlength="12" value="0"> 枚</td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <td>合計</td> <td><input type="text" name="goukei" size="8" maxlength="12" value="0"> 円</td> </tr> </table> <input type="button" value="計算する" onClick="keisan(this.form)"> </form>

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

    チェックボックスの設定方法を教えてください。 項目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> すいませんが、教えて下さい。

  • テーブル内のチェックボックスを、全て選択、全て解除 したい

    以下のような、フォームの中にあるテーブル内のチェックボックスを一括して選択、解除したいのですが、どのように書けば良いのかが分かりません。 <form name="form1"> <table> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="1">項目(1)</td> </tr> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="2">項目(2)</td> </tr> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="3">項目(3)</td> </tr> </table> </form> ↓これは自分で試したプログラムですが、うまく動きませんでした。 <SCRIPT TYPE="text/javascript"> <!-- var count; function BoxChecked(check){ for(count = 0; count < document.form1.array[].length; count++){ document.form1.array[][count].checked = check; } } //--> </SCRIPT> <INPUT TYPE="button" onClick="BoxChecked(true);" VALUE="全て選択"> <INPUT TYPE="button" onClick="BoxChecked(false);" VALUE="全て未選択"> ↓ここに載っているのを色々変更してみたのですが上手くいきませんでした。 http://www5e.biglobe.ne.jp/~access_r/hp/javascript/js_072.html よろしくお願いします。

  • テーブル行のクリックでチェックボックスの制御

    テーブル行をクリックしたときにその行にあるチェックボックスのON/OFFを 制御したいと思います。 Jqueryで以下サンプルを作成してみました。該当行をクリックするとチェックボックスが ONになったりOFFになったりするのですがチェックボックス自体をクリックするとうまく チェックがONになりません。恐らくチェックボックスをクリックした時はONになっていて、 同時に行をクリックしたとみなされONになっているチェックボックスをOFFにしているのでは ないかと思われます。 チェックボックスをクリックしてもON/OFFがうまくいくようにするためにはどうすればよろしいでしょうか 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#nameTable tr").click(function() { //alert($(data).find(":checkbox").val()); var chk = $(this).find(":checkbox"); if(chk.prop("checked")) { chk.attr("checked", false); } else { chk.attr("checked", true); } }); }); </script> <title>CSS</title> <style type="text/css"> </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <table id="nameTable" border="1"> <tr><th>名前</th><th>チェックボックス</th></tr> <tr><td>あいうえお</td><td><input type="checkbox" value="1"></td></tr> <tr><td>かきくけこ</td><td><input type="checkbox" value="2"></td></tr> <tr><td>さしすせそ</td><td><input type="checkbox" value="3"></td></tr> <tr><td>たちつてと</td><td><input type="checkbox" value="4"></td></tr> <tr><td>なにぬねの</td><td><input type="checkbox" value="5"></td></tr> </table> </body> </html>

  • チェックボックスがIE8で正しく動作しないのはなぜ

    下記サンプルコードをIE8やIE7で試してみると、チェックボックスをクリックしても その時点で動かず、ウインドウ上のどこかをクリックしないと動きません。 Firefox, Chrome, IE9ではチェックボックスをクリックした時点で動きます。 どこに問題があるのでしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> </head> <body> <form> <ul id="t"> <li><input type="checkbox" name="t_0" onchange="fff()" value="0pt" /><label for="t_0">0pt</label></li> <li><input type="checkbox" name="t_1" onchange="fff()" value="10pt" /><label for="t_1">10pt</label></li> <li><input type="checkbox" name="t_2" onchange="fff()" value="20pt" /><label for="t_2">20pt</label></li> <li><input type="checkbox" name="t_3" onchange="fff()" value="30pt" /><label for="t_3">30pt</label></li> <li><input type="checkbox" name="t_4" onchange="fff()" value="40pt" /><label for="t_4">40pt</label></li> <li><input type="checkbox" name="t_5" onchange="fff()" value="50pt" /><label for="t_5">50pt</label></li> <li><input type="checkbox" name="t_6" onchange="fff()" value="60pt" /><label for="t_6">60pt</label></li> <li><input type="checkbox" name="t_7" onchange="fff()" value="70pt" /><label for="t_7">70pt</label></li> <li><input type="checkbox" name="t_8" onchange="fff()" value="80pt" /><label for="t_8">80pt</label></li> <li><input type="checkbox" name="t_9" onchange="fff()" value="90pt" /><label for="t_9">90pt</label></li> <li><input type="checkbox" name="t_10" onchange="fff()" value="100pt" /><label for="t_10">100pt</label></li> </ul> </form> <table> <tr> <td>サンプル1 :</td><td>60pt</td> </tr> </table> <table> <tr> <td>サンプル2 :</td><td>30pt</td> </tr> </table> <table> <tr> <td>サンプル3 :</td><td>40pt</td> </tr> </table> <script type="text/javascript"> function fff() { var a = new Array; var b = document.getElementById('t').getElementsByTagName("input"); var c = document.getElementsByTagName('table'); for(i=0,len=b.length; i<len; i++){ if(b[i].checked == true){ a[i] = b[i].value; }else{ a[i] = ""; } } for(i=0,len=c.length; i<len; i++){ var d = c[i].getElementsByTagName('td'); var e = d[1].innerHTML; var if1 = a[0]==e || a[1]==e || a[2]==e || a[3]==e || a[4]==e || a[5]==e || a[6]==e || a[7]==e || a[8]==e || a[9]==e || a[10]==e; var if2 = a[0]=="" && a[1]=="" && a[2]=="" && a[3]=="" && a[4]=="" && a[5]=="" && a[6]=="" && a[7]=="" && a[8]=="" && a[9]=="" && a[10]==""; if(if1 || if2){ c[i].style.display = ''; }else{ c[i].style.display = 'none'; } } } </script> </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
  • チェックボックスが複数ある場合の値取得について

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

  • domでの削除

    チェックボックスを使ってループで回しながらTRを削除しようとしているんですが、連続でチェックするとうまくいきません。 ご教授宜しくお願いします。 function test() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "checkbox" && inputs[i].checked) { tb1.deleteRow(i); } } }; <table border="1" id="tb1"> <tr> <td><input type="checkbox" name="flag" value=""></td> <td>0</td> </tr>      ・      ・      ・ <tr> <td><input type="checkbox" name="flag" value=""></td> <td>9</td> </tr> </table> <input type="button" value="削除" onclick="test();"><br> }