ラジオボタンを選択すると、他のラジオボタンの動きを制御したい

radio1～radio3のいずれか「はい」を選択すると、
その他が強制的に「いいえ」に切り替わるスクリプトはどのように作成すればよろしいでしょうか？

<INPUT TYPE=radio NAME="radio1" VALUE="1">はい
<INPUT TYPE=radio NAME="radio1" VALUE="2">いいえ

<INPUT TYPE=radio NAME="radio2" VALUE="1">はい
<INPUT TYPE=radio NAME="radio2" VALUE="2">いいえ

<INPUT TYPE=radio NAME="radio3" VALUE="1">はい
<INPUT TYPE=radio NAME="radio3" VALUE="2">いいえ

No.2 ベストアンサー 回答者： _pipi_ 回答日時： 2009/03/16 09:07

寝ぼけてた。

<form>
<p>
<input type="radio" name="radio1" value="1" class="gp0">はい
<input type="radio" name="radio1" value="2" class="gp0" checked>いいえ
</p>
<p>
<input type="radio" name="radio2" value="1" class="gp0">はい
<input type="radio" name="radio2" value="2" class="gp0" checked>いいえ
</p>
<p>
<input type="radio" name="radio3" value="1" class="gp0">はい
<input type="radio" name="radio3" value="2" class="gp0" checked>いいえ
</p>
</form>


<script type="text/javascript">
//@cc_on
var grp = 'gp0';
var reg = new RegExp('\\b' + grp + '\\b');
var elms = document.getElementsByTagName('input');
var o, objs = [], cnt = 0;
while (o = elms[cnt++]) if (o.className && o.className.match(reg)) objs.push(o);

document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click',
function (evt) {
var c = 0;
var e = evt./*@if (1) srcElement @else@*/ target /*@end@*/;

if (!(e.tagName == 'INPUT' && e.type == 'radio')) return;
if (!(e.className && e.className.match(reg))) return;

if (e.value == '1') {
while (o = objs[c++]) o.checked = o.value == '2';
e.checked = true;
}
}
, false);

</script>
でどうでしょう？

この回答へのお礼

ありがとうございます。
動作いたしました。

クリック時にnameとvalue値を見てif文を、と考えてたのですが
こんな方法があるんですね。

調べて見ると//@cc_onを記載すると、IEのみが有効になると記載があったのですが、私の環境ではFFも動作しました。この場合は違った制御をかけているのでしょうか？
勉強不足で申し訳ないです。ご教授頂けると幸いです、

お礼日時：2009/03/16 10:43

No.5 回答者： _pipi_ 回答日時： 2009/03/16 12:01

//@cc_on

/*@if(1) ieで実行させたいとき @else@*/ ie以外で実行したいとき /*@end@*/

例えば、AjaxとinnerHTMLを使って、画面を書き換えたとき
そのつどonclickを定義していてはメモリーリークになる可能性が・・
なので、documentだけを見てます

この回答へのお礼

なるほど、そこまでまったく頭が回りませんでした…。
記載頂いたソースを基に勉強させてもらいます。。
ありがとうございました。

お礼日時：2009/03/16 20:53

No.4 回答者： yambejp 回答日時： 2009/03/16 11:45

じゃぁclassをつかってグルーピングするとか・・・・

<script>
window.onload=function(){
var tags=document.getElementsByTagName("input");
for(var i=0;i<tags.length;i++){
if(tags[i].type=="radio" && tags[i].value=="1"){
tags[i].onclick=function(){
var f=this.form;
for(var i=0;i<f.length;i++){
if(f[i].type=="radio" && f[i].name!=this.name && this.className==f[i].className){
f[i].checked=(f[i].value=="2");
}
}
}
}
}
}
</script>
<form>
<p>
<INPUT TYPE="radio" class="hoge" NAME="radio1" VALUE="1">はい
<INPUT TYPE="radio" class="hoge" NAME="radio1" VALUE="2">いいえ

<INPUT TYPE="radio" class="hoge" NAME="radio2" VALUE="1">はい
<INPUT TYPE="radio" class="hoge" NAME="radio2" VALUE="2">いいえ

<INPUT TYPE="radio" class="hoge" NAME="radio3" VALUE="1">はい
<INPUT TYPE="radio" class="hoge" NAME="radio3" VALUE="2">いいえ

<INPUT TYPE="radio" NAME="radio4" VALUE="1">はい
<INPUT TYPE="radio" NAME="radio4" VALUE="0">いいえ
</p>
</form>

この回答へのお礼

ありがとうございます。
解決いたしました。

お礼日時：2009/03/16 20:48

No.3 回答者： yambejp 回答日時： 2009/03/16 09:36

こんな感じでどうでしょ？

<script>
window.onload=function(){
var tags=document.getElementsByTagName("input");
for(var i=0;i<tags.length;i++){
if(tags[i].type=="radio" && tags[i].value=="1"){
tags[i].onclick=function(){
var f=this.form;
for(var i=0;i<f.length;i++){
if(f[i].type=="radio" && f[i].name!=this.name){
f[i].checked=(f[i].value=="2");
}
}
}
}
}
}

</script>
<form>
<p>
<INPUT TYPE="radio" NAME="radio1" VALUE="1">はい
<INPUT TYPE="radio" NAME="radio1" VALUE="2">いいえ

<INPUT TYPE="radio" NAME="radio2" VALUE="1">はい
<INPUT TYPE="radio" NAME="radio2" VALUE="2">いいえ

<INPUT TYPE="radio" NAME="radio3" VALUE="1">はい
<INPUT TYPE="radio" NAME="radio3" VALUE="2">いいえ
</p>
</form>

この回答へのお礼

ありがとうございます。想定の動作です。

すみません。例えば
<INPUT TYPE="radio" NAME="radio4" VALUE="1">はい
<INPUT TYPE="radio" NAME="radio4" VALUE="0">いいえ
を追加した場合で、name=radio4は上記の動作から除きたい場合はどのようになるのでしょうか？

お礼日時：2009/03/16 10:58

No.1 回答者： _pipi_ 回答日時： 2009/03/16 07:41

<INPUT TYPE="radio" NAME="radio1" VALUE="1">はい

<INPUT TYPE="radio" NAME="radio1" VALUE="2">いいえ

<INPUT TYPE="radio" NAME="radio1" VALUE="3">はい
<INPUT TYPE="radio" NAME="radio1" VALUE="4">いいえ

<INPUT TYPE="radio" NAME="radio1" VALUE="5">はい
<INPUT TYPE="radio" NAME="radio1" VALUE="6">いいえ

//後はvalue値で判断できるのでは？