- ベストアンサー
チェックボックスの連動で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
- momora365
- お礼率78% (11/14)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
たとえばクラスを設定してグルーピングをするとか・・・ それとformにformという名前を付けるのはいろいろあってNG。 こんな感じでどうでしょ？ <script> function check(obj){ var f=obj.form; var cn=obj.className; for(var i=0;i<f.length;i++){ if(f[i]==obj) continue; if(f[i].type=="checkbox") f[i].checked=(cn==f[i].className); } } </script> <form> 項目【あ】<br /> <input type="checkbox" name="a" onclick="check(this)" class="a"> A<BR> <input type="checkbox" name="b" onclick="check(this)" class="b"> B<BR> <br /> 項目【い】<br /> <input type="checkbox" name="aa" onclick="check(this)" class="a"> A<BR> <input type="checkbox" name="bb" onclick="check(this)" class="b"> B<BR> <br /> </form>
その他の回答 (1)
classNameで指定すると ブラウザによって認識しなくなります。 <html> <head> <title>無題ドキュメント</title> <script> function grpCheck(myId){ if(document.getElementById){ frmObj = document.getElementById("Form1"); inpObj = frmObj.document.getElementById(myId); inpTags = frmObj.getElementsByTagName("input"); if(inpObj.checked){ for(var i = 0; i < inpTags.length; i++){ if(inpTags(i).id.charAt(0) == myId.charAt(0)){ inpTags(i).checked = true; } } } } } </script> </head> <body> <form id="Form1"> 項目【あ <input type="checkbox" id="A-a" onclick="grpCheck(this.id)"> A<br /> <input type="checkbox" id="B-a" onclick="grpCheck(this.id)"> B<br /> <br />項目【い <input type="checkbox" id="A-b" onclick="grpCheck(this.id)"> A<br /> <input type="checkbox" id="B-b" onclick="grpCheck(this.id)"> B<br /> <br /> </form> </body> </html> こんな感じでグループ分けしたらどうでしょう。
お礼
Chiquilin様へ ソースまで示して頂き大変丁寧にご回答頂き感謝です。 ありがとうございました！m(_ _)m ＞classNameで指定すると ブラウザによって認識しなくなります。 そうだったのですか、知りませんでした。貴重な情報感謝です。 yambejp様が示してくださったソースでIE6,IE7、Firefoxなどで正常に機能して おりますので、今回の所はyambejp様の方法で作ってみたいと考えています。 他のブラウザで不具合があればChiquilin様のソースを参考にさせていただきます。 Chiquilin様やyambejp様のような方が居てくれることになんだか感動しています。 インターネットで自分も人助けできるようにがんばりたいです！ 本当にありがとうございました。
お礼
yambejp様へ 早々にご回答頂き感謝です！ スタイルシートのclassタグでチェックさせるなんて素晴らしいアイデアで 自分には一生考えつかない方法だと思います。 ＞それとformにformという名前を付けるのはいろいろあってNG。 今まで、ご指摘頂くまで普通にそのように名前付けていました。 これから過去に作ったものも変更していきたいと思います。 また、お教え頂いた方法でうまくいきました！ ソースまで作って頂き親切に教えて頂き本当にありがとうございました。m(_ _)m 自分もyambejp様みたいに、誰かに教えてあげられるように頑張りたいと思います。