dポイントプレゼントキャンペーン実施中！

チェックボックスのグループ化による選択可否

解決済

  • 質問者：masa328
  • 質問日時：
  • 回答数：4件

４つのチェックボックス２つのグループに分けて
一方がチェックされている時は、他方のグループ
はチェックできないようにできるでしょうか？

具体的には、
□1マイル
□5マイル

□1キロメートル
□5キロメートル
というチェックボックスがあり、上のマイルグループのどれかにチェックをいれると下のキロメートル部ループはチェックを入れられないようにしたいのです。
（もちろん逆のケースもあり）

どうにかなりますでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.1ベストアンサー

  • 回答者： yambejp
  • 回答日時：

２こずつだとわかりにくいので一応３こずつでこんな感じ


チェックをはずした時点で、他方にもチェックがつけられる
ようになります。

<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
こちらもチェックをつけるとエラーになってしまうのですが・・(T.T)

通報する
お礼日時：2006/07/31 21:25

No.4

  • 回答者： BLUEPIXY
  • 回答日時：

#2>チェックをいれるとエラーになってしまうのですが・・


どんなエラーメッセージがでてどこで起こっているかわかりますか？

試されたブラウザの種類・バージョンなども教えてください。
あと、できたら、部分でなくて、試された全体を補足して下さい。

この回答への補足

あ、すいません。できました。<form>がありませんでした。

補足日時：2006/08/01 17:23
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

var len = f[me.name].length の行で
'null'はNullまたはオブジェクトではありません。
というエラーがでます。
環境はＸＰ＋ＩＥ６です。

ちょっと大きいので全体はここで表示できませんが、
function部分はそのままコピーしています。

通報する
お礼日時：2006/08/01 17:12

No.3

  • 回答者： yambejp
  • 回答日時：

うーむなんでしょうかね？


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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

できました。
<form>がありませんでした。

通報する
お礼日時：2006/08/01 17:25

No.2

  • 回答者： BLUEPIXY
  • 回答日時：

<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

さっそくありがとうございます。
しかし、チェックをいれるとエラーになってしまうのですが・・

なお、本体は
<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 />

のようにしています。

通報する
お礼日時：2006/07/31 21:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報