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

質問

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

noname#84373 · ベストアンサー

寝ぼけてた。
<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も動作しました。この場合は違った制御をかけているのでしょうか？
勉強不足で申し訳ないです。ご教授頂けると幸いです、

回答No.5

noname#84373

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

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

お礼

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

回答No.4

yambejp

じゃぁ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>

お礼

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

回答No.3

yambejp

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

<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は上記の動作から除きたい場合はどのようになるのでしょうか？

回答No.1

noname#84373

<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値で判断できるのでは？