チェックボックスとラジオボタンの連動について

□親メニュー1　□親メニュー2
◎子メニュー1　◎子メニュー2　◎子メニュー3

上記のように、親のチェックボックスが２つあり、
どちらか一方をチェック、または両方チェックを入れると、
子のラジオボタンが選択可能になるようにしたいのですが
Javascriptの書き方が分かりません。

<input type="checkbox" name="親メニュー" id="id01" value="親メニュー1"> 親メニュー1
<input type="checkbox" name="親メニュー" id="id02" value="親メニュー2"> 親メニュー2
<input type="radio" name="子メニュー" id="id03" value="子メニュー1"> 子メニュー1
<input type="radio" name="子メニュー" id="id04" value="子メニュー2"> 子メニュー2
<input type="radio" name="子メニュー" id="id05" value="子メニュー3"> 子メニュー3

また条件が一つあり
上記のようにname属性に日本語が含まれて、nemeが同じなので
チェック有無がID属性か、別の要素で確認が出来るようにしたいのですが
どのようにすれば出来るのかお教え頂けないでしょうか。

No.2 ベストアンサー 回答者： yambejp 回答日時： 2011/10/20 14:38

＞name属性に日本語が含まれて

この運用は高い確率で破綻します、なるべく避けた方がいいでしょう。

＞チェック有無がID属性か、別の要素で確認が出来るよう

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

<script>
window.onload=function(){
set_radio();
}
try{
document.addEventListener ('click',function(e){clickfunc(e)},true); //基本
}catch(e){
document.attachEvent('onclick',function(e){clickfunc(e)}); //IE
}
function clickfunc(e){
var t = (e.srcElement || e.target);
if(t.id=="id01" || t.id=="id02"){
set_radio();
}
}
function set_radio(){
var flg=!(document.getElementById('id01').checked || document.getElementById('id02').checked );
document.getElementById('id03').disabled=flg;
document.getElementById('id04').disabled=flg;
document.getElementById('id05').disabled=flg;
}
</script>
<form>
<div>
<input type="checkbox" name="親メニュー" id="id01" value="親メニュー1"> 親メニュー1
<input type="checkbox" name="親メニュー" id="id02" value="親メニュー2"> 親メニュー2
</div>
<div>
<input type="radio" name="子メニュー" id="id03" value="子メニュー1"> 子メニュー1
<input type="radio" name="子メニュー" id="id04" value="子メニュー2"> 子メニュー2
<input type="radio" name="子メニュー" id="id05" value="子メニュー3"> 子メニュー3
</div>
<form>

この回答へのお礼

早速のご回答くださり、ありがとうございます。
うまくこの通りに機能することができました。

name属性で日本語は避けるべきなのですね。
利用しているメールフォームのCGIがあって
それには仕様でname属性が日本語でしたので
この条件でやるしかないと思ってました。

これで助かりました。大変感謝致します。

お礼日時：2011/10/20 16:54

No.1 回答者： noname#158634 回答日時： 2011/10/20 13:29

自分ではどこまでできたのか、きちんと書きましょうね。

checkedプロパティというのがあります。
http://javascriptist.net/ref/element.checked.html
あとはifとorだけなのですぐに理解できるでしょう。

この回答へのお礼

早速のご回答くださり、ありがとうございます。
確かに説明不足でした。すみません。
参考にさせて頂きます。

お礼日時：2011/10/20 16:22