重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

form内に2つ以上のブロック要素があるとjavascriptが動作し

解決済

  • 質問者：barakamon
  • 質問日時：
  • 回答数：1件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： nine999
  • 回答日時：

<DIV>をすべて取り除いても、正常に動作しませんでした。


今度は全部が使用可能な状態になります。
ノードを調べて処理をするのではなく、idで処理する方が判りやすいと思います。
1つ目のラジオボタンを選ぶと「h」を取得し、hで始まるチェックボックス２つに対してのみ使用可能にする手順でどうでしょうか。

この回答への補足

ご回答ありがとうございます。

一部の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を使う方ほうですね、なるほど。
試してみます！

補足日時：2010/05/14 14:48
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

無事に動作しました！
一応、動作したスクリプトを書いておきます。

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;
}
}

通報する
お礼日時：2010/05/14 15:25

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報