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

解決済

質問者：kajiya16
質問日時：2013/01/08 12:13
回答数：2件

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

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

【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="１週間ごと" onClick="changeDisplay()"/>１週間ごと</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="１年ごと" onClick="changeDisplay()"/>１年ごと</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="１週間ごと" onClick="changeDisplay()"/>１週間ごと</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="１年ごと" onClick="changeDisplay()"/>１年ごと</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="１週間ごと" onClick="changeDisplay()"/>１週間ごと</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="１年ごと" onClick="changeDisplay()"/>１年ごと</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;

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2013/01/09 18:45

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="１週間ごと">１週間ごと</li>
<li><input type="radio" name="AAA" value="1ヶ月ごと" > 1ヶ月ごと</li>
<li><input type="radio" name="AAA" value="１年ごと">１年ごと</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="１週間ごと">１週間ごと</li>
<li><input type="radio" name="BBB" value="1ヶ月ごと"> 1ヶ月ごと</li>
<li><input type="radio" name="BBB" value="１年ごと">１年ごと</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="１週間ごと">１週間ごと</li>
<li><input type="radio" name="CCC" value="1ヶ月ごと"> 1ヶ月ごと</li>
<li><input type="radio" name="CCC" value="１年ごと">１年ごと</li>
</ul>
<p><input type="text" name="ZZZ" size="15"></p>
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2013/01/10 05:24

No.1

回答者： fujillin
回答日時：2013/01/08 13:01

スクリプトで関数changeDisplayを3回定義していますが、名前が同じなので上書きされてしまうため、結果的に最後の定義だけが有効になります。

それぞれを有効にしたければ、それぞれ名前を変えるか、あるいは、一つの関数でどの場合でも処理できるようにしておくなどが必要になります。

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

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

この回答への補足

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

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

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

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

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

補足日時：2013/01/08 20:46

通報する