CGI-BBS > JAVA/JavaScript > JavaScript > 属性の違うラジオボタンの同時選択をエラー表示したい。


カレッヂ
カレッヂ


質問者  投稿日 2005/4/12(火) 20:51:21
<input type="radio" value="A" name="A">

<input type="radio" value="B" name="B">

<input type>の属性の違うこのラジオボタン同士の組み合わせを選ぶと
エラー表示ができるようにしたいのですが、誰か、教えていただけませんでしょうか?

【習熟度】多少の改造ができる

回答者 sim  [削除]  投稿日 2005/4/14(木) 10:15:38
AとBのどちらのチェックがついてると困る場合
<input type="radio" value="A" name="A" onclick="if(this.form.B.checked){alert('Bにチェックついてるよ');}">
<input type="radio" value="B" name="B" onclick="if(this.form.A.checked){alert('Aにチェックついてるよ');}">

さらにチェックを禁止したい場合
<input type="radio" value="A" name="A" onclick="if(this.form.B.checked){alert('Bにチェックついてるよ');this.checked=false;}">
<input type="radio" value="B" name="B" onclick="if(this.form.A.checked){alert('Aにチェックついてるよ');tihs.checked=false;}">

こんなのでいいんでしょうか?
質問者  [削除]  投稿日 2005/4/14(木) 12:26:15
回答者様へ
早々に回答いただきありがとうございます。
説明不足だったかもしれませんので、今一度質問させてください。

属性A-1<input type="radio" value="A" name="a">←
属性A-2<input type="radio" value="A" name="b">
属性A-3<input type="radio" value="A" name="c">

属性B-1<input type="radio" value="B" name="α">
属性B-2<input type="radio" value="B" name="β">←
属性B-3<<input type="radio" value="B" name="γ">

この場合、
属性A-1と属性B-2のラジオボタンを同時に選択したときにalertメッセージを登場させたいのです。
なにとぞ、回答いただけますようよろしくお願いいたします。
回答者 sim  [削除]  投稿日 2005/4/14(木) 12:57:13
すいません。私はどうも人の説明の意図を読み取るのが苦手でして。

行いたい動作は下記でよいでしょうか?


1.属性Aと属性Bのグループがある
2.属性Aのaを選択時、属性Bはαしか選択できない
  属性Aのbを選択時、属性Bはβしか選択できない
  属性Aのcを選択時、属性Bはγしか選択できない
  
それとも下記でしょうか?

1.属性Aと属性Bのグループがある
2.属性Aのグループ、属性Bのグループから一つだけ選択することが出来る


上記の場合は先ほどのレスの応用で出来るかと思います。
下記の場合は下のようなものではいかがでしょうか?

<form>
<input type="radio" value="A" name="A" onclick="for(i=0;i<this.form.B.length;i++){if(this.form.B[i].checked){alert('同時に選択できません。');this.form.B[i].checked=false;}}">
<input type="radio" value="B" name="A" onclick="for(i=0;i<this.form.B.length;i++){if(this.form.B[i].checked){alert('同時に選択できません。');this.form.B[i].checked=false;}}">
<input type="radio" value="C" name="A" onclick="for(i=0;i<this.form.B.length;i++){if(this.form.B[i].checked){alert('同時に選択できません。');this.form.B[i].checked=false;}}">
<input type="radio" value="α" name="B" onclick="for(i=0;i<this.form.A.length;i++){if(this.form.A[i].checked){alert('同時に選択できません。');this.form.A[i].checked=false;}}">
<input type="radio" value="β" name="B" onclick="for(i=0;i<this.form.A.length;i++){if(this.form.A[i].checked){alert('同時に選択できません。');this.form.A[i].checked=false;}}">
<input type="radio" value="γ" name="B" onclick="for(i=0;i<this.form.A.length;i++){if(this.form.A[i].checked){alert('同時に選択できません。');this.form.A[i].checked=false;}}">
</form>
質問者  [削除]  投稿日 2005/4/14(木) 14:15:10
回答者様へ

重ね重ねご回答いただきありがとうございます。

希望していたのは・・・
属性A-1と属性B-2のラジオボタンを同時に選択したときに【のみ】alertメッセージを登場させたいのです。つまり、属性Aのaを選択時、属性Bはβを選択できないということでした。


そこで・・・

<form>
×と×の組み合わせでアラートメッセージ<br><br>
A群<br>
<input type="radio" value="A" name="A" onclick="for(i=0;i<this.form.B.length;i++){if(this.form.B[i].checked){alert('B群の×を同時に選択できません。');this.form.B[i].checked=false;}}">×
<input type="radio" value="B" name="A">○
<input type="radio" value="C" name="A">○
<br>
B群<br>
<input type="radio" value="α" name="B">○
<input type="radio" value="β" name="B" onclick="for(i=0;i<this.form.A.length;i++){if(this.form.A[i].checked){alert('A群の×を同時に選択できません。');this.form.A[i].checked=false;}}">×
<input type="radio" value="γ" name="B">○
</form>

このように必要と思われる記述だけを残しましたら、ほとんど、希望通りにアラート近づきました。
何度か試していると○と×の組み合わせなのにバグとしか思えないアラート表示が登場してしまうのが多少気になりました。これは仕方ないものなのでしょうか?もし改善策があれば、ご教唆ください。

いずれによよ、回答いただきありがとうございました。
心から感謝しております。
質問者  [削除]  投稿日 2005/4/14(木) 14:26:41
補足なのですが、

×のついているラジオボタンを2番目に押すと
アラートメッセージが登場してしまうようです。

どうか、お助け下さい。
回答者 sim  [削除]  投稿日 2005/4/14(木) 15:08:25
はい。では、下記のような状態でしょうか?

「name=A の valueがAの時に、name=BのvalueがBの場合は選択が出来ない」

<form>
<input type="radio" value="A" name="A" onclick="if(this.form.B[1].checked){alert('同時選択できません。');this.form.B[1].checked=false;}">
<input type="radio" value="B" name="A">
<input type="radio" value="C" name="A">
<input type="radio" value="α" name="B">
<input type="radio" value="β" name="B" onclick="if(this.form.A[0].checked){alert('同時選択できません。');this.form.A[0].checked=false;}">
<input type="radio" value="γ" name="B">
</form>

これでどうでしょう?
質問者  [削除]  投稿日 2005/4/14(木) 15:46:25
心ある回答者様へ

上手くいきました。完璧です。
この掲示板と素晴らしい回答者に巡り会えましたことを、心から御礼申し上げます。
真にありがとうございました。

このページは終了したので返信(回答)は書きこめません
 


Web裏技