- ベストアンサー
複数のラジオボタン項目でのテキスト入力欄の有効化
- 複数のラジオボタン項目を持つテキスト入力欄を有効化する方法について質問します。HTMLのソースコードを示し、JavaScriptを使用して要素の表示・非表示を切り替える方法を試みていますがうまくいきません。
- ソースコードは複数のラジオボタン項目を持ち、それぞれ「なし」「１週間ごと」「1ヶ月ごと」「１年ごと」という選択肢があります。選択肢のうち「なし」を選択した場合にはテキスト入力欄を非表示にしたいのですが、どの部分を修正すれば良いのでしょうか。
- JavaScriptの関数`changeDisplay()`を使用して、ラジオボタンの状態に応じてテキスト入力欄の表示・非表示を切り替える処理を行っています。しかし、３つのラジオボタン項目を持つ場合には正常に動作しません。どのように修正すれば良いでしょうか。
- kajiya16
- お礼率84% (16/19)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
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>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
スクリプトで関数changeDisplayを3回定義していますが、名前が同じなので上書きされてしまうため、結果的に最後の定義だけが有効になります。 それぞれを有効にしたければ、それぞれ名前を変えるか、あるいは、一つの関数でどの場合でも処理できるようにしておくなどが必要になります。 window.onloadについても３回記述していますが、同様に最後のものが有効になります。 あと、今回の御質問には直接関係はありませんが、inputのidがダブっていますけれど、idは基本的に一意であるはずなのでHTMLの構文違反になっています。 また、ご質問文からでは「mailform」の存在が不明ですが、対象が存在しないとエラーになるはずです。
補足
ご回答ありがとうございます。 HTMLソースの文頭と末尾に <form id="mailform" name="mailform" method="post" action="send.cgi"> </form> を記載するのを忘れていました。失礼しました。 また、idがダブってはいけないということ、勉強させて頂きました。 ＞それぞれ名前を変えるか、あるいは、一つの関数でどの場合でも処理できるようにしておく とのことですが、調べながら少しずつ変えて実行してみましたがうまく動かず、あまりに私のレベルが低く具体的にどうしていいのか理解できませんでした。 引き続き勉強しながら教えていただいた内容が理解できるようがんばります。
お礼
ありがとうございます。 下の方法で無事解決できました。 教えていただいたことが理解できるようもっと勉強したいと思います。 ありがとうございました。