- ベストアンサー
チェックボックスの一括選択。一括選択削除
質問させてください。 大分類の項目が３つ、１つの大分類に対しての小分類の項目が５つあり、それぞれの項目にチェックボックスをつけています。 ↓□がチェックボックスだとします。 □大分類１ □小分類１－１ □小分類１－２ ・・・小分類１－５ □大分類２ □小分類２－１ □小分類２－２ ・・・小分類２－５ □大分類３ □小分類３－１ □小分類３－２ ・・・小分類３－５ 上記のようなフォームをつくり、大分類１のチェックボックスにチェックを入れると、小分類１－１ から 小分類１－５まで自動でチェックが入るスクリプトを作りたいのですが。。。 たとえば、大分類１をチェックしたとき用のファンクション、大分類２をチェックしたとき用のファンクション、大分類３をチェックしたとき用のファンクション。。。と、ファンクションを分ければうまくいくのですが、引数（？）配列（？）を使用して、ひとつのファンクションにまとめれないものでしょうか。。。 ちなみに、スクリプトは以下の通りです。 var count; function BoxChecked(){ if (document.kisyu.x.checked == true){ for(count = 0; count < document.kisyu.ck.length; count++){ document.kisyu.ck[count].checked = true; } } else{ for(count = 0; count < document.kisyu.ck.length; count++){ document.kisyu.ck[count].checked = false; } } } 上記スクリプト内の「x」が大分類のチェックボックス、「ck」が小分類のチェックボックスとなっています。 色々試したのですがうまくいかず。。。 どなたかご教授願います。
- masa_to
- お礼率82% (48/58)
- JavaScript
- 回答数3
- ありがとう数9
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
bxが親でsxが子という名前で確定しているなら以下のようにしてください ちなみにinputは最低限formの入れ子にしてください <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"> <tr> <td rowspan="4" class="color_1"><input type="checkbox" name="b1" onClick="allCheck(this)">果物</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 rowspan="3" class="color_1"><input type="checkbox" name="b2" onClick="allCheck(this)">野菜</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> </table> </form>
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
大分類と小分類に親子関係を持たせて入れ子になっていれば出来ます。 サンプル）…分かりやくfieldsetを使いましたが単なるdivとかでも可能です。（その場合は親子を括るタグにはclassを付ける等して親だと判定できるようにする必要がありますが。） <html> <head> <title>test</title> <script type="text/javascript"> <!-- function allchk(O){ for(var pO = O.parentNode;;pO = pO.parentNode) { if(pO.nodeType == 1 && pO.tagName == 'FIELDSET') break; } var cList = pO.getElementsByTagName('input'); var cListLength = cList.length; for(var i= 0 ;i<cListLength;i++) { if(cList[i] == O) continue; cList[i].checked = O.checked; } } //--> </script> </head> <body> <fieldset><legend><input type="checkbox" onclick="allchk(this)">大分類１</legend> <input type="checkbox">小分類１－１ <input type="checkbox">小分類１－２ <input type="checkbox">小分類１－３ </fieldset> <fieldset><legend><input type="checkbox" onclick="allchk(this)">大分類２</legend> <input type="checkbox">小分類２－１ <input type="checkbox">小分類２－２ </fieldset> </body> </html>
補足
ご回答ありがとうございます。 ご教授いただいた方法で、思い通りの動きをしてくれました。 ありがとうございました。 そこでまた問題が発生したのですが。。。 テーブルを組むと、fieldsetは使えないのでしょうか。。。 <table> <tr><fieldset><legend> <td rowspan="3"><input type="checkbox">大分類1</legend></td> <td><input type="checkbox">小分類1-1</td> </tr> <tr> <td><input type="checkbox">小分類1-2</td> </tr> <tr> <td><input type="checkbox">小分類1-3</td> </fieldset></tr> <tr> <fieldset><legend> <td rowspan="3"><input type="checkbox">大分類2</legend></td> <td><input type="checkbox">小分類2-1</td> </tr> <tr> <td><input type="checkbox">小分類2-2</td> </tr> <tr> <td><input type="checkbox">小分類2-3</td> </fieldset></tr> </table> 上記のようにしてみたところ、大分類1をチェックしたときに小分類1-1のみにチェックがつき、大分類2をチェックしたときに小分類2-1のみにチェックがつきました。。。 テーブルを組んだ場合、divなどで親子関係を作る必要があるのでしょうか。。。
- yambejp
- ベストアンサー率51% (3827/7415)
大分類はそれぞれ同じ名前なのですか？ また小分類もすべて同じ名前なのですか？ ではそれぞれの要素の違いを何でみわけているのでしょうか？ value値？ もしなんらかの法則性があるなら実現可能です。 基本的にはそれぞれの名前に一定の法則性をつけて管理するのが 一番簡単だとおもいます。 とにかく、チェックボックスの状況をhtmlソースとして 一度、提示してみてください
補足
ご回答ありがとうございます。 大分類、小分類ともに全て違う名前です。 （ここで言う「名前」というのは、単なるテキスト名？でしょうか？？checkboxのnameのことであるならば、単純に1から順に名前をつけていこうかと思っております。） チェックボックスの状況は、以下のようになっています。 <table border="0"> <tr> <td rowspan="4" class="color_1"><input 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 rowspan="3" class="color_1"><input type="checkbox" name="b2">野菜</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> </table> 説明不足で申し訳ございませんでした。 ご教授の程、宜しくお願いいたします。
関連するQ&A
- フォームの上下に一括チェックボックスを置くには？
HTML＋Javascriptで、選択削除のフォームを作っています。 一覧の上下に一括チェックボックスを置きたいのですが上手く行かないのです。 -------------------- javascript↓ -------------------- //一括チェック用チェックボックス function allcheck() { var count = document.delete.chk.length; var allcheck = document.delete.chk_all.checked; for ( var i=0; i<count; i++) { var check = document.delete.chk[i].checked; if (allcheck == true) { document.delete.chk[i].checked = true; } else { document.delete.chk[i].checked = false; } } } //個別チェック用チェックボックス function check(onjCheck) { if (onjCheck.checked == false) { document.delete.chk_all.checked = false; return; } var count = document.delete.chk.length; for (var i=0; i<count; i++) { if (document.delete.name != "chk_all" && document.delete.chk[i].checked == false) { return; } } document.delete.chk_all.checked = true; } -------------------- HTML↓ -------------------- <form action="" name="delete"> <fieldset> <input type="checkbox" name="chk_all" id="all_head" onclick="allcheck(this)"> <label for="all_head">すべて選択／解除</label> <input type="submit" value="選択した項目を削除"> </fieldset> <fieldset> <input type="checkbox" name="chk" onclick="check(this)"> 項目1 <input type="checkbox" name="chk" onclick="check(this)"> 項目2 <input type="checkbox" name="chk" onclick="check(this)"> 項目3 </fieldset> <fieldset> <input type="checkbox" name="chk_all" id="all_foot" onclick="allcheck(this)"> <label for="all_foot">すべて選択／解除</label> <input type="submit" value="選択した項目を削除"> </fieldset> </form> このように記述しています。 上か下か、片方であれば一括チェックを実現できました。 当方Javascript初心者です。 よろしくご教示願います。
- 締切済み
- JavaScript
- チェックボックスの選択チェック
ラジオボタンの選択チェック、セレクトボタンの選択チェックのあとにチェックボックスの選択チェックをしたいのですが、どのように入れればよいのでしょうか。教えてください。 ↓参考までに↓ function check() { var flag=0; if( document.form1.seibetu.length){ flag=1; var i; for(i=0; i<document.form1.seibetu.length; i++) if(document.form1.seibetu[i].checked)flag=false; } if(flag){ alert('性別が選択されていません'); return false; } if(document.form1.nenrei.value=="")flag=true; if(flag){ alert('年齢が選択されていません'); return false; } if( document.form1.Q1.length){ flag=1; var i; for(var i=0; i<document.form1.Q1.length; i++) if(document.form1.Q1[i].checked)flag=false; if(flag){ alert('Q1が選択されていません'); return false; } else {★★★ここに入れたい★★★ ;} } }
- 締切済み
- その他([技術者向] コンピューター)
- チェックボックスの連動でJavaScriptの記述を短くしたい。
【あ】、【い】という項目があり、それぞれの項目内にA、Bというチェック項目があります。 【あ】項目のAにチェックを入れると【い】のAにもチェックが入るように作りました。 以下のソースでもなんとか動くのですが、【あ】、【い】という項目が増える事とA、Bというチェック項目が増えることが判り、JavaScriptのソースを少しでも短くしたいのですが、なにか好い方法がございましたらお教え頂ければ幸です。 /************参考ソースです*****************/ <html> <head> <title>無題ドキュメント</title> <script> function check_a(){ if(document.form.a.checked==true) { document.form.a.checked=true; document.form.b.checked=false; document.form.aa.checked=true; document.form.bb.checked=false; } } function check_b(){ if(document.form.b.checked==true) { document.form.a.checked=false; document.form.b.checked=true; document.form.aa.checked=false; document.form.bb.checked=true; } } function check_aa(){ if(document.form.aa.checked==true) { document.form.a.checked=true; document.form.b.checked=false; document.form.aa.checked=true; document.form.bb.checked=false; } } function check_bb(){ if(document.form.bb.checked==true) { document.form.a.checked=false; document.form.b.checked=true; document.form.aa.checked=false; document.form.bb.checked=true; } } </script> </head> <body> <form name="form"> 項目【あ】 <input type="checkbox" name="a" onclick="check_a()"> A<BR> <input type="checkbox" name="b" onclick="check_b()"> B<BR> <br /> 項目【い】 <input type="checkbox" name="aa" onclick="check_aa()"> A<BR> <input type="checkbox" name="bb" onclick="check_bb()"> B<BR> <br /> </form> </body> </html> /*************************/ 何卒、宜しくお願い申上げます。m(_ _)m
- ベストアンサー
- JavaScript
- ページ内の全チェックボックスのチェック
ページ内の全チェックボックスのチェックするブックマックレットを作成したいのですが、うまく動作しません。どのようにすればよいのでしょうか？ よろしくお願いします。 javascript:void(for(i=0; i<document.form[0].elements[0].checkboxs.length; i++){document.form[0].elements[0].checkboxs[i].checked=true;})
- 締切済み
- JavaScript
- チェックボックスのチェックについて
チェックボックスが２つあります。 一つが選択されたらテキストボックスが入力可能にしてあります。 Ａを選択すると、Ｂのチェックが外れる、反対の場合も同じようにしたいのですが、下記のように書きましたがうまくいきません。 解決方法が分かられる方、教えて下さい。 *********************************************** function Change(){ if(document.myForm.chkB.checked ==true{ document.myForm.TxtA.disabled = true; document.myForm.chkA.checked = false; } else { document.myForm.TxtA.disabled = false; document.myForm.chkA.checked = true; } } ***********************************************
- 締切済み
- JavaScript
- テーブル内のチェックボックスを、全て選択、全て解除 したい
以下のような、フォームの中にあるテーブル内のチェックボックスを一括して選択、解除したいのですが、どのように書けば良いのかが分かりません。 <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
- チェックボックスの未入力チェック
ざっとですけれども <form action="**" name="myform" onsubmit="return Check()" method=post> <input type="checkbox" name="Erasedata" id="Erasedata" value="1" > <input type="checkbox" name="Erasedata" id="Erasedata" value="2" > ・・・ <input type="checkbox" name="Erasedata" id="Erasedata" value="5" > <input type="submit" value="選択されたものを削除する"> このようなチェックボックスがあったとして function Check() { for (i=0;i<document.myform.length;i++) { if(document.myform.Erasedata[i].checked==true) {return true;} } alert("どこかにチェックを入れて下さい "); return false; } といった感じで未入力チェックをしています。 チェックボックスが複数の場合はうまく動くのですが、チェックボックスがひとつだとうまくいきません。スクリプトで何か問題があるようでしたらご指摘お願いできませんでしょうか。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- チェックボックス制御２つ以上併記したい
チェックボックスの選択数制御をしたいと思っています。Javascript初心者です。 同じ画面上に複数の質問がありまして、以下のように記述したのですが、後者（b_1～b_10）しか挙動しません・・前者はエラーも出ずに何も起こりませんでした。 どの部分が問題となっているのでしょうか。最終的には３つ質問があります（a,b,c）。大変申し訳ないのですが、対処法をご教示いただけないでしょうか。 どうぞよろしくお願いいたします。 <SCRIPT language="JavaScript"> <!-- // チェックボックス １つめ chn = new Array("a_1","a_2","a_3","a_4","a_5","a_6","a_7","a_8","a_9","a_10"); chc = 5; function chBx(cn){ cnt = 0; for(i=0; i<chn.length; i++) { if(document.trForm.elements[chn[i]].checked) cnt++; } if(cnt > chc) { alert("選択できる項目は" + chc + "個までです"); document.trForm.elements[cn].checked = false; } } // チェックボックス ２つめ chn2 = new Array("b_1","b_2","b_3","b_4","b_5","b_6","b_7","b_8","b_9","b_10"); chc2 = 5; function chBx(cn2){ cnt2 = 0; for(i=0; i<chn2.length; i++) { if(document.trForm.elements[chn2[i]].checked) cnt2++; } if(cnt2 > chc2) { alert("選択できる項目は" + chc2 + "個までです"); document.trForm.elements[cn2].checked = false; } } //--> </SCRIPT>
- ベストアンサー
- JavaScript
- ラジオボタンとセレクトボックスの選択チェック
ラジオボタン、セレクトボタンの選択チェックをしたいのですが 同時にチェックする場合どうすればよいのでしょうか。 失敗策ですが、参考までに↓ function check() { var flag=0; if( document.form1.seibetu.length){ flag=1; var i; for(i=0; i<document.form1.seibetu.length; i++){ if(document.form1.seibetu[i].checked){ flag=0; break; } } } else{ if(!document.form1.seibetu.checked){ flag=1; } } if(flag){ window.alert('性別が選択されていません'); return false; } else{ return true; } if(document.form1.nenrei.options[document.form1.nenrei.selectedIndex]. value==""){ flag=1; } if(flag){ window.alert('年齢が選択されていません'); return false; } else{return true; } }
- ベストアンサー
- その他([技術者向] コンピューター)
- チェックボックスで画像を一括表示
下記サイトを参照して、 「チェックボックスのON / OFFで画像を表示する」 「全てのチェックボックスのON / OFFを切り替える」 を組み合わせて、 「全てのチェックボックスのON / OFFを切り替えて画像の一括表示」をしたいのですが、全てのチェックボックスのON / OFFの切り替えはできるのですが、それに伴って画像の表示・非表示までは反応しませんでした。各チェックボックスのON / OFFでの画像の表示・非表示は可能です。 http://iswebmag.hp.infoseek.co.jp/sample163.html http://iswebmag.hp.infoseek.co.jp/sample164.html ▼htmlソースです。 <FORM name="f1"> <INPUT type=checkbox name="f1" onClick="show(0,'img01')">朝焼に輝く星<BR> <INPUT type=checkbox name="f1" onClick="show(1,'img02')">木立の隙間から<BR> <INPUT type=checkbox name="f1" onClick="show(2,'img03')">夜明け<BR> <INPUT type=checkbox name="f1" onClick="show(3,'img04')">自転を感じる<BR> <INPUT type=checkbox name="f1" onClick="show(4,'img05')">昼の星空<BR> <INPUT type=checkbox name="f1" onClick="show(5,'img06')">砂丘の月<BR> <INPUT type=checkbox name="f1" onClick="show(6,'img07')">月の軌跡<BR> <INPUT type=checkbox name="f1" onClick="show(7,'img08')">彗星の飛来<BR> <INPUT type=checkbox name="f1" onClick="show(8,'img09')">彗星 <BR> <INPUT type=button value="全てOn" onClick="all_on(this.form.f1)"> <INPUT type=button value="全てOff" onClick="all_off(this.form.f1)"> </FORM> ▼チェックボックスのON / OFFで画像を表示するJavaScript <SCRIPT language="JavaScript"> <!-- function show(c,img){ if(document.f1.elements[c].checked == true){ document.getElementById(img).style.width=200; } else { document.getElementById(img).style.width=0; } } // --> </SCRIPT> ▼全てのチェックボックスのON / OFFを切り替えるJavaScript <SCRIPT language="JavaScript"> <!-- function all_on(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = true; } } function all_off(chk){ for (i = 0; i < chk.length; i++) { chk[i].checked = false; } } // --> </SCRIPT>
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 まさに、望むとおりの動きができました！！ 本当にありがとうございました！！ まだまだJavaScript初心者なもので、仕組みがよくわからないのでいただいたソースを解析して勉強したいと思います。 本当にありがとうございました！！