ラジオボタンの入力制御について（表示した時のみ制御を行う）

質問

yesの場合はid=ABを表示し、noの場合はid=ABを非表示にする制御を行っています。
両方yesの場合は表示。両方noの場合は非表示。
片方がnullの場合は、yesで表示しnoで非表示としています。
ここまでの動作は、問題ないのですが
id=ABを表示した場合、hoge3が入力必須となり
id=ABを表示しない場合、hoge3は入力必須ではないように制御を行いたいと思っています。

他書き込みを参考にしたのと、自身で書いたものが混じって非常に汚くなっていますが
ご教授願えませんでしょうか。

<script type="text/JavaScript">
<!--
function test1(){
if(document.getElementById("id01").checked) {
document.getElementById('AB').style.display = "";
}else if(document.getElementById("id02").checked) {
document.getElementById('AB').style.display = "";
for(i = 0; i <= 1; i ++){
document.form1.hoge3[i].checked = false;
}
}else{
document.getElementById('AB').style.display = "none";
for(i = 0; i <= 1; i ++){
document.form1.hoge3[i].checked = false;
}
}
}

//以下はhttp://oshiete1.goo.ne.jp/qa2119460.htmlを参考にしました
function test2(f){
for (var i=0;i<f.length;i++){
if(f[i].type=="radio" && f[i].name=="hoge3" && f[i].checked==true) return true;
}
alert("AかBを選んでください");
return false;
}

//-->
</script>

<form name="form1" onload="test1()"onsubmit="return test2(this)">

<br>
<input type="radio" name="hoge1" value="1" id="id01" onClick="test1();">yes<br>
<input type="radio" name="hoge1" value="0" onClick="test1();">no<br>
<br>
<input type="radio" name="hoge2" value="1" id="id02" onClick="test1();">yes<br>
<input type="radio" name="hoge2" value="0" onClick="test1();">no<br>
<br>
<p id="AB" style="display:none;">
<input type="radio" name="hoge3" value="1">Aへ進む<br>
<input type="radio" name="hoge3" value="2">Bへ進む<br>
</p>
<br>
<input type="submit" value="次へ">
</form>

回答No.1

fujillin · ベストアンサー

test2の最初に　ABが表示されているかどうかのチェックを入れればよいのでは？

if (document.getElementById('AB').style.display) {
　　return true;　　//　'none'の場合（=非表示）
} else {
　　現在のコード　　 // ''の場合(=表示）現在のコードを実行
}

（↑全角空白でスペースをとっています。ご注意）

お礼

あ…
そうですよね。表示の有無チェックで可能ですね。
先程からラジオボタンの状態をチェックしようとして詰んでいました…。

お恥ずかしい。。。
ありがとうございました。