チェックボックスの全選択・全解除を一つにまとめる方法
- チェックボックスの全選択・全解除を一つにまとめる方法について教えてください。
- チェックボックスの全選択・全解除を一つにしたいです。具体的には、最初に表示されるボタンは「全て選択」のみで、クリックすると「全て解除」ボタンに変わります。また、再度クリックすると再び「全て選択」ボタンに変わるような仕組みです。
- 以上のような仕組みを実現するためのソースコードを教えてください。
- ベストアンサー
チェックボックスの全選択・全解除を一つにまとめたい
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> 以上、よろしくお願いします。
- iroha_168
- お礼率89% (204/228)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
これでどうでしょう。 function toggle_check(form, button){ if(button.value=="全て選択"){ var flag = 1; button.value = "全て解除"; }else{ var flag = 0; button.value = "全て選択"; } for(i=0; i<form.length; i++){ if(form.elements[i].type == "checkbox") form.elements[i].checked = flag; } } <input type="button" onclick="toggle_check(this.form,this)" value="全て選択">
その他の回答 (1)
- tmsen
- ベストアンサー率22% (2/9)
無理
関連するQ&A
- チェックボックスの全選択/解除について
お尋ねします。 チェックボックスの全選択/解除について １画面にチェックボックスのグループが複数（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" />項目１<br/> <input type="checkbox" name="item[]" value="2" />項目２<br/> <input type="checkbox" name="item[]" value="3" />項目３<br/> <input type="checkbox" name="item[]" value="4" />項目４<br/> <input type="checkbox" name="item[]" value="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
- テーブル内のチェックボックスを、全て選択、全て解除 したい
以下のような、フォームの中にあるテーブル内のチェックボックスを一括して選択、解除したいのですが、どのように書けば良いのかが分かりません。 <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 よろしくお願いします。
- ベストアンサー
- JavaScript
- チェックボックスのチェック処理
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
- ラジオボタンが選択によるチェックボックス・ボタンの制御方法
お世話になります。 やりたい事 (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>Ａ小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>Ｂ小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>Ｃ小学校<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>Ａ中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>Ｃ中学校<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>Ａ中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>Ｃ中学校<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>
- ベストアンサー
- 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を書くのも余り良い書き方だと思えません。 どなたか、ご教授お願いいたします。
- ベストアンサー
- JavaScript
- グループ別けされたチェックボックスの選択および解除
こんばんは。いつもお世話になっております。 随分前になりますが、こちらでご指導いただいた内容を元に、タイトルにある、グループ別けされたチェックボックス郡の選択および解除をしたいと考えているのですが、お恥ずかしながら、思うような結果を得る事が出来ません。 お忙しい中恐縮ですが、ご指導いただきたく投函させて頂きます。 ※グループ単位で選択or解除をしたい □カテゴリ（すべて選択or解除） □１ □２ □３ □４ □５ □タイプ □１ □２ □３ □４ □５ 文字数制限に引っかかってしまったので、javascpipt部は非表示にいたします。 <input type="checkbox" onclick="CheckAlt(this)"> <div id="category"> <input type="checkbox" name="category[]" value="1"> <input type="checkbox" name="category[]" value="2"> <input type="checkbox" name="category[]" value="3"> <input type="checkbox" name="category[]" value="4"> <input type="checkbox" name="category[]" value="5"> </div> <input type="checkbox" onclick="CheckAlt(this)"> <div id="type"> <input type="checkbox" name="type[]" value="1"> <input type="checkbox" name="type[]" value="2"> <input type="checkbox" name="type[]" value="3"> <input type="checkbox" name="type[]" value="4"> <input type="checkbox" name="type[]" value="5"> </div>
- ベストアンサー
- JavaScript
- チェックボタンの制御方法
チェックボタンの制御方法で 下記のようなことがやりたいです。 (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>Ａ小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>Ｂ小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>Ｃ小学校<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>Ａ中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>Ｃ中学校<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>Ａ中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>Ｃ中学校<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>
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- チェックボックス設定の方法教えてください
チェックボックスの設定方法を教えてください。 項目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> すいませんが、教えて下さい。
- ベストアンサー
- JavaScript
- チェックボックスの全選択
<input type="checkbox" name="chk" value=1> <input type="checkbox" name="chk" value=2> <input type="checkbox" name="chk" value=3> <input type="checkbox" name="chk" value=4> <input type="checkbox" name="chk" value=5> このように同一名称のチェックボックスに対して ボタンを押下された時全てのチェックボックスを チェックするＪａｖａＳｃｒｉｐｔの 書き方を教えて貰えないでしょうか
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 ご教示いただいたソースで意図した動作になりました。 このたびはどうもありがとうございました。