- ベストアンサー
チェックボックスのグループ化による選択可否
４つのチェックボックス２つのグループに分けて 一方がチェックされている時は、他方のグループ はチェックできないようにできるでしょうか？ 具体的には、 □1マイル □5マイル □1キロメートル □5キロメートル というチェックボックスがあり、上のマイルグループのどれかにチェックをいれると下のキロメートル部ループはチェックを入れられないようにしたいのです。 （もちろん逆のケースもあり） どうにかなりますでしょうか？
- masa328
- お礼率77% (64/83)
- JavaScript
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
２こずつだとわかりにくいので一応３こずつでこんな感じ チェックをはずした時点で、他方にもチェックがつけられる ようになります。 <script language=javascript> function checkboxFunc(obj){ var f=obj.form var flg=false for (var i=0;i<f.length;i++){ if(f[i].className==obj.className && f[i].name==obj.name && f[i].checked==true) flg=true } for (var i=0;i<f.length;i++){ if(f[i].className==obj.className && f[i].name!=obj.name) f[i].disabled=flg } } </script> <form> <input type="checkbox" name="gr1[]" value="1" class="check1" onClick="checkboxFunc(this)">1マイル <input type="checkbox" name="gr1[]" value="5" class="check1" onClick="checkboxFunc(this)">5マイル <input type="checkbox" name="gr1[]" value="10" class="check1" onClick="checkboxFunc(this)">10マイル <hr> <input type="checkbox" name="gr2[]" value="1" class="check1" onClick="checkboxFunc(this)">1キロメートル <input type="checkbox" name="gr2[]" value="5" class="check1" onClick="checkboxFunc(this)">5キロメートル <input type="checkbox" name="gr2[]" value="10" class="check1" onClick="checkboxFunc(this)">10キロメートル </form>
その他の回答 (3)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#2>チェックをいれるとエラーになってしまうのですが・・ どんなエラーメッセージがでてどこで起こっているかわかりますか？ 試されたブラウザの種類・バージョンなども教えてください。 あと、できたら、部分でなくて、試された全体を補足して下さい。
お礼
var len = f[me.name].length の行で 'null'はNullまたはオブジェクトではありません。 というエラーがでます。 環境はＸＰ＋ＩＥ６です。 ちょっと大きいので全体はここで表示できませんが、 function部分はそのままコピーしています。
補足
あ、すいません。できました。<form>がありませんでした。
- yambejp
- ベストアンサー率51% (3827/7415)
うーむなんでしょうかね？ IE6やFirefox1.5では問題なさそうですが・・・。 エラーの環境などお書きになるとよろしかと <script language=javascript> function limitation(obj){ var f=obj.form var flg=false for (var i=0;i<f.length;i++){ if(f[i].className==obj.className && f[i].name==obj.name && f[i].checked==true) flg=true } for (var i=0;i<f.length;i++){ if(f[i].className==obj.className && f[i].name!=obj.name) f[i].disabled=flg } } </script> <form> <input type="checkbox" id="1m" value="1m" name="mile" class="checkB2" onClick="limitation(this)">per 1Mile<img src="../gif/mm_20_green.gif"><br /> <input type="checkbox" id="5m" value="5m" name="mile" class="checkB2" onClick="limitation(this)">per 5Mile<img src="../gif/mm_20_brown.gif"><br /> <input type="checkbox" id="1k" value="1k" name="kilo" class="checkB2" onClick="limitation(this)">per 1Km<img src="../gif/mm_20_red.gif"><br /> <input type="checkbox" id="5k" value="5k" name="kilo" class="checkB2" onClick="limitation(this)">per 5Km<img src="../gif/mm_20_blue.gif"><br /> </form>
お礼
できました。 <form>がありませんでした。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <script type="text/javascript"> <!-- function limitation(me){ var other = (me.name == "mile") ? "kilo" : "mile"; var f = me.form; var i, c=0; var len = f[me.name].length; for(i=0;i<len;i++){ if(f[me.name][i].checked){ c++;//現在のチェックされている数を数える } } len = f[other].length; for(i=0;i<len;i++){ f[other][i].disabled = (c>0); } } //--> </script> <title>チェックボックスのグループの制限</title> </head> <body> <form name="form1"> <INPUT type="checkbox" id="mile1" name="mile" value="m1" onclick="limitation(this)"><label for="mile1">1マイル</label><br> <INPUT type="checkbox" id="mile5" name="mile" value="m5" onclick="limitation(this)"><label for="mile5">5マイル</label><br> <br> <INPUT type="checkbox" id="kilo1" name="kilo" value="k1" onclick="limitation(this)"><label for="kilo1">1キロメートル</label><br> <INPUT type="checkbox" id="kilo5" name="kilo" value="k5" onclick="limitation(this)"><label for="kilo5">5キロメートル</label><br> <input type="reset" value="リセット"> </form> </body> </html>
お礼
さっそくありがとうございます。 しかし、チェックをいれるとエラーになってしまうのですが・・ なお、本体は <input type="checkbox" id="1m" value="1m" name="mile" class="checkB2" onClick="limitation(this)">per 1Mile<img src="../gif/mm_20_green.gif"><br /> <input type="checkbox" id="5m" value="5m" name="mile" class="checkB2" onClick="limitation(this)">per 5Mile<img src="../gif/mm_20_brown.gif"><br /> <input type="checkbox" id="1k" value="1k" name="kilo" class="checkB2" onClick="limitation(this)">per 1Km<img src="../gif/mm_20_red.gif"><br /> <input type="checkbox" id="5k" value="5k" name="kilo" class="checkB2" onClick="limitation(this)">per 5Km<img src="../gif/mm_20_blue.gif"><br /> のようにしています。
お礼
ありがとうございます。 こちらもチェックをつけるとエラーになってしまうのですが・・(T.T)