※ ChatGPTを利用し、要約された質問です（原文：form内に2つ以上のブロック要素があるとjavascriptが動作し）
form内に2つ以上のブロック要素があるとjavascriptが動作しない
このQ&Aのポイント
form内に2つ以上のブロック要素があると、javascriptが正常に動作しません。デザインのために、ラジオボタンとチェックボックスを<div>で囲むと、javascriptが無効になってしまいます。
javascriptの書き方を変えても解決しないため、スクリプトの修正方法を教えていただきたいです。
初心者の質問ですが、お助けいただけると嬉しいです。よろしくお願いします。
form内に2つ以上のブロック要素があるとjavascriptが動作し
form内に2つ以上のブロック要素があるとjavascriptが動作しません。
タイトルの通りですが、form内にラジオボタンとチェックボクスをdivで１つだけ囲むと
ラジオボタンで選択した箇所の2つのチェックボックスが有効になるようにはしたんですが、
デザインの為にこれをラジオボタンとチェックボックスとそれぞれ<div>で囲むとjavascriptが動かなくなります。
javascriptの書き方を変えれば行けるような気がするのですがギブアップしました。
どなたかここを有効に出来るようなスクリプトを教えていただけないでしょうか。
初歩的な質問で申し訳なく思いますが、どうかよろしくお願いいたします。
<html>
<head>
<title>test</title>
<SCRIPT TYPE="text/javascript">
<!--
function checkfunc(){
var f=document.getElementById("chkbtn");
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox"){
f[i].disabled=true;
//チェックを元に戻す
f[i].checked = true;
}
}
for(var i=0;i<f.length;i++){
if(f[i].type=="radio" && f[i].checked){
var n=f[i].parentNode.firstChild;
//ラジオボタンのvalue値でカテゴリを判断
var radio_now = f[i].value;
while(n){
if(n.nodeName=="INPUT" && n.type=="checkbox") n.disabled=false;
n=n.nextSibling;
}
}
}
}
// -->
</SCRIPT>
<style type="text/css">
<!--
#wrap{
width: 170px;
margin: 0 auto;
}
.radio_style{
color: #fff;
width: 150px;
background-color: #505050;;
}
.detail{
margin-left: 10px;
}
-->
</style>
</head>
<body onload="checkfunc()">
<div id="wrap">
<form id="chkbtn" action="#">
<div class="radio_style">
<input type="radio" name="now" value="1" onclick="checkfunc()" onkeypress="checkfunc()" checked="selected" />宿泊<br />
</div>
<div class="detail">
<input type="checkbox" id="h1box" checked="selected" /> ホテル<br />
<input type="checkbox" id="h2box" checked="selected" /> ビシネスホテル<br />
</div>
<div class="radio_style">
<input type="radio" name="now" value="2" onclick="checkfunc()" onkeypress="checkfunc()">グルメ
</div>
<div class="detail">
<input type="checkbox" id="g1box" checked="selected" /> うどん<br />
<input type="checkbox" id="g2box" checked="selected" /> そば<br />
</div>
</form>
</div>
</body>
</html>
お礼
無事に動作しました！ 一応、動作したスクリプトを書いておきます。 function checkfunc(){ var list = document.getElementById('wrap').getElementsByTagName('input'); var flag; for(var i=0;list[i];i++) { if(list[i].type == 'radio'){ flag = list[i].checked; continue; } list[i].disabled = ! flag; } }
補足
ご回答ありがとうございます。 一部のdivを削ると動作はします。↓ <body onload="checkfunc()"> <div id="wrap"> <form id="chkbtn" action="#"> <div class="radio_style"> <input type="radio" name="now" value="1" onclick="checkfunc()" onkeypress="checkfunc()" checked="selected" />宿泊<br /> <input type="checkbox" id="h1box" checked="selected" /> ホテル<br /> <input type="checkbox" id="h2box" checked="selected" /> ビシネスホテル<br /> </div> <div class="radio_style"> <input type="radio" name="now" value="2" onclick="checkfunc()" onkeypress="checkfunc()">グルメ <input type="checkbox" id="g1box" checked="selected" /> うどん<br /> <input type="checkbox" id="g2box" checked="selected" /> そば<br /> </div> </form> </div> </body> idを使う方ほうですね、なるほど。 試してみます！