こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

複数のラジオボタン項目でのテキスト入力欄の有効化

調べながら手探りでソースを書いてみましたが、うまく動きません。
javascript初心者ですので、ものすごく初歩的な勘違いがあったり、または根本から全く間違っているかもしれません。

以下のソースのように、ラジオボタンで選択してもらう項目が3つある場合、それぞれ「なし」を選択した場合だけテキスト入力欄を非表示にしたいのですがうまく動きません。
ラジオボタンで選択する項目が1つずつだとうまくいくのですが、3つの場合どこを修正したらいいのでしょうか?
よろしくお願いします。

【HTML】
<script type="text/javascript" src="sample.js" charset="UTF-8"></script>

<ul>
<li><input type="radio" name="AAA" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li>
<li><input type="radio" name="AAA" id="by_week" value="1週間ごと" onClick="changeDisplay()"/>1週間ごと</li>
<li><input type="radio" name="AAA" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li>
<li><input type="radio" name="AAA" id="by_year" value="1年ごと" onClick="changeDisplay()"/>1年ごと</li>
</ul>
<p id="AAA-text" style="display:none;">
<input type="text" name="XXX" size="15" >
</p>

<ul>
<li><input type="radio" name="BBB" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li>
<li><input type="radio" name="BBB" id="by_week" value="1週間ごと" onClick="changeDisplay()"/>1週間ごと</li>
<li><input type="radio" name="BBB" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li>
<li><input type="radio" name="BBB" id="by_year" value="1年ごと" onClick="changeDisplay()"/>1年ごと</li>
</ul>
<p id="BBB-text" style="display:none;">
<input type="text" name="YYY" size="15" >
</p>

<ul>
<li><input type="radio" name="CCC" id="nothing" value="なし" onClick="changeDisplay()"/>なし</li>
<li><input type="radio" name="CCC" id="by_week" value="1週間ごと" onClick="changeDisplay()"/>1週間ごと</li>
<li><input type="radio" name="CCC" id="by_month" value="1ヶ月ごと" onClick="changeDisplay()"/> 1ヶ月ごと</li>
<li><input type="radio" name="CCC" id="by_year" value="1年ごと" onClick="changeDisplay()"/>1年ごと</li>
</ul>
<p id="CCC-text" style="display:none;">
<input type="text" name="ZZZ" size="15" >
</p>


【sample.js】
function changeDisplay() {
if ( document.mailform["AAA"][0].checked ) {
document . mailform["XXX"] . disabled = true;
document . getElementById('AAA-text') . style . display = "none";
} else {
document . mailform["XXX"] . disabled = false;
document . getElementById('AAA-text') . style . display = "inline";
}
}
window.onload = changeDisplay;

//----------------------------------------------------------------------------

function changeDisplay() {
if ( document.mailform["BBB"][0].checked ) {
document . mailform["YYY"] . disabled = true;
document . getElementById('BBB-text') . style . display = "none";
} else {
document . mailform["YYY"] . disabled = false;
document . getElementById('BBB-text') . style . display = "inline";
}
}
window.onload = changeDisplay;

//----------------------------------------------------------------------------


function changeDisplay() {
if ( document.mailform["CCC"][0].checked ) {
document . mailform["ZZZ"] . disabled = true;
document . getElementById('CCC-text') . style . display = "none";
} else {
document . mailform["ZZZ"] . disabled = false;
document . getElementById('CCC-text') . style . display = "inline";
}
}
window.onload = changeDisplay;

投稿日時 - 2013-01-08 12:13:57

QNo.7881481

困ってます

質問者が選んだベストアンサー

ANo1です。

>とのことですが、調べながら少しずつ変えて実行してみましたがうまく動かず、
>あまりに私のレベルが低く具体的にどうしていいのか理解できませんでした
前半の方法は、単純に関数名を変えればよいだけですので、例えば
 changeDisplay
 changeDisplay1
 changeDisplay2
などのようにしてあげればよろしいと思います。


後半の方法の例として、御質問の動作を完全に理解できているわけではないので、どの程度あっているのか不明ですが…
(class="hoge"内の要素群を一つの単位として、同じ処理を行なうようにしています)

(全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
form.hoge p { display:none; }
</style>

<script type="text/javascript">
/*@cc_on@*/
document./*@if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/ 'click',
 function(e){
  var t = e./*@if(1)srcElement@else*/target/*@end@*/;
  if(t.nodeName!="INPUT" || t.type!="radio") return;
  var f = t.form;

  if(f && /(^| )hoge( |$)/.test(f.className)){
   var inp = f.elements, i = 0, e = inp[0];
   while(e && !(e.nodeName=="INPUT" && e.type=="text")) e = inp[++i];
   if(e) e.parentNode.style.display = t.value=="なし"? "none": "inline";
  }
 }, false);
</script>
</head>

<body>
<form class="hoge" action="#">
<ul>
<li><input type="radio" name="AAA" value="なし">なし</li>
<li><input type="radio" name="AAA" value="1週間ごと">1週間ごと</li>
<li><input type="radio" name="AAA" value="1ヶ月ごと" > 1ヶ月ごと</li>
<li><input type="radio" name="AAA" value="1年ごと">1年ごと</li>
</ul>
<p><input type="text" name="XXX" size="15"></p>
</form>

<form class="hoge" action="#">
<ul>
<li><input type="radio" name="BBB" value="なし">なし</li>
<li><input type="radio" name="BBB" value="1週間ごと">1週間ごと</li>
<li><input type="radio" name="BBB" value="1ヶ月ごと"> 1ヶ月ごと</li>
<li><input type="radio" name="BBB" value="1年ごと">1年ごと</li>
</ul>
<p><input type="text" name="YYY" size="15"></p>
</form>

<form class="hoge" action="#">
<ul>
<li><input type="radio" name="CCC" value="なし">なし</li>
<li><input type="radio" name="CCC" value="1週間ごと">1週間ごと</li>
<li><input type="radio" name="CCC" value="1ヶ月ごと"> 1ヶ月ごと</li>
<li><input type="radio" name="CCC" value="1年ごと">1年ごと</li>
</ul>
<p><input type="text" name="ZZZ" size="15"></p>
</form>
</body>
</html>

投稿日時 - 2013-01-09 18:45:32

お礼

ありがとうございます。
下の方法で無事解決できました。
教えていただいたことが理解できるようもっと勉強したいと思います。
ありがとうございました。

投稿日時 - 2013-01-10 05:24:22

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

スクリプトで関数changeDisplayを3回定義していますが、名前が同じなので上書きされてしまうため、結果的に最後の定義だけが有効になります。
それぞれを有効にしたければ、それぞれ名前を変えるか、あるいは、一つの関数でどの場合でも処理できるようにしておくなどが必要になります。

window.onloadについても3回記述していますが、同様に最後のものが有効になります。

あと、今回の御質問には直接関係はありませんが、inputのidがダブっていますけれど、idは基本的に一意であるはずなのでHTMLの構文違反になっています。
また、ご質問文からでは「mailform」の存在が不明ですが、対象が存在しないとエラーになるはずです。

投稿日時 - 2013-01-08 13:01:21

補足

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

HTMLソースの文頭と末尾に
<form id="mailform" name="mailform" method="post" action="send.cgi">
</form>
を記載するのを忘れていました。失礼しました。

また、idがダブってはいけないということ、勉強させて頂きました。

>それぞれ名前を変えるか、あるいは、一つの関数でどの場合でも処理できるようにしておく
とのことですが、調べながら少しずつ変えて実行してみましたがうまく動かず、あまりに私のレベルが低く具体的にどうしていいのか理解できませんでした。

引き続き勉強しながら教えていただいた内容が理解できるようがんばります。

投稿日時 - 2013-01-08 20:46:30

あなたにオススメの質問