- ベストアンサー
チェックボックスの一括選択。一括選択削除
質問させてください。 大分類の項目が３つ、１つの大分類に対しての小分類の項目が５つあり、それぞれの項目にチェックボックスをつけています。 ↓□がチェックボックスだとします。 □大分類１ □小分類１－１ □小分類１－２ ・・・小分類１－５ □大分類２ □小分類２－１ □小分類２－２ ・・・小分類２－５ □大分類３ □小分類３－１ □小分類３－２ ・・・小分類３－５ 上記のようなフォームをつくり、大分類１のチェックボックスにチェックを入れると、小分類１－１ から 小分類１－５まで自動でチェックが入るスクリプトを作りたいのですが。。。 たとえば、大分類１をチェックしたとき用のファンクション、大分類２をチェックしたとき用のファンクション、大分類３をチェックしたとき用のファンクション。。。と、ファンクションを分ければうまくいくのですが、引数（？）配列（？）を使用して、ひとつのファンクションにまとめれないものでしょうか。。。 ちなみに、スクリプトは以下の通りです。 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> 説明不足で申し訳ございませんでした。 ご教授の程、宜しくお願いいたします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ご回答ありがとうございます。 まさに、望むとおりの動きができました！！ 本当にありがとうございました！！ まだまだJavaScript初心者なもので、仕組みがよくわからないのでいただいたソースを解析して勉強したいと思います。 本当にありがとうございました！！