- ベストアンサー
ラジオボタンで入力フィールドを表示・非表示する
初歩的なJavaScriptの質問です。 ”はい””いいえ”２値のラジオボタンで”はい”の時だけ質問フィールドや次のラジオボタンを表示したいと思っています。 このようなjavaScriptのサンプルソースがあったら教えて頂けないでしょうか。 よろしくお願いします。
- bacchus047
- お礼率44% (63/141)
- JavaScript
- 回答数7
- ありがとう数7
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
＞ ラジオボタン２組と入力フィールド一つが常に表示され、変化ありませんでした。 ＩＥ９、Firefox、Chrome、Safari、Operaで動作確認しましたが、ＯＫでした。 気になって、ここのコードをコピペしたら、確かに動きません。 原因は、var disp = の行に、余計な改行が入るためのようです。 いずれにしても、私の提案した内容は、表示、非表示を強引にinnerHTMLで操作すると いう反則技なので、他の方のコードを利用してください。 ＰＳ 最初、onclickではなく、onchangeで作成していたら、ＩＥは不正な動作をしました。 これは、調べると有名なことのようです。今回私もいろいろタメになりました。
その他の回答 (6)
- cero_d
- ベストアンサー率87% (14/16)
chromeとIE8で動作確認はしております。 <html> <title></title> <head> <script type="text/javascript"> function toggleText(qa,id) { document.getElementById(id).style.display = qa ? '':'none'; } </script> </head> <body> <div>問１ <label><input type="radio" name="qa1_radio" value="no" onclick="toggleText(false,this.name)">いいえ</label> <label><input type="radio" name="qa1_radio" value="yes" onclick="toggleText(true,this.name)">はい</label> <input type="text" id="qa1_radio" style="display:none;"> </div> <div>問２ <label><input type="radio" name="qa2_radio" value="no" onclick="toggleText(false,this.name)">いいえ</label> <label><input type="radio" name="qa2_radio" value="yes" onclick="toggleText(true,this.name)">はい</label> <input type="text" id="qa2_radio" style="display:none;"> </div> </body> </html>
お礼
ありがとうございました。 参考になりました。
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE html> <meta charset="UTF-8"> <title></title> <body> <p id="Q1"> Q.1 <label><input type="radio" name="q1" value="no" onclick="C(this,['q1e', 'Q3'],['Q2']);">NO</label> <label><input type="radio" name="q1" value="yes" onclick="C(this,['Q2'],['q1e', 'Q3']);">YES</label> <label id="q1e">その他:<input type="text" name="q1"></label> </p> <p id="Q2"> Q.2 <label><input type="radio" name="q2" value="no" onclick="C(this,['q1e']);">NO</label> <label><input type="radio" name="q2" value="yes" onclick="C(this,[],['q1e']);">YES</label> </p> <p id="Q3"> Q.3 <label><input type="radio" name="q3" value="no" onclick="C(this,['Q4']);">NO</label> <label><input type="radio" name="q3" value="yes" onclick="C(this,[],['Q4']);">YES</label> </p> <p id="Q4"> Q.3 <label><input type="radio" name="q4" value="no" onclick="">NO</label> <label><input type="radio" name="q4" value="yes" onclick="">YES</label> </p> <script> function A (id) { var e = document.getElementById (id); if (e) e.style.visibility = this.checked ? 'visible': 'hidden' ; } function C (a, b, c) {//b 表示するid, c 隠すid (b || []).forEach (A, {checked:!a.checked}); (c || []).forEach (A, a); } </script>
お礼
ありがとうございました。 参考になりました。
- babu_baboo
- ベストアンサー率51% (268/525)
#3です 以下はゴミです。ごめんなさい。 input[type="radio"]:root body p:nth-of-type(2) { color:green; }
お礼
ありがとうございました。 参考になりました。
補足
ありがとうございます。 動作的には正にこの通りなのですが、cssではなくjavascriptを使いたいです。
- babu_baboo
- ベストアンサー率51% (268/525)
「次のラジオボタンを表示」は、まだ(css4?)できませんが… <!DOCTYPE html> <meta charset="UTF-8"> <title></title> <style> input[type="radio"] + label + label { visibility: hidden; } input[type="radio"]:checked + label + label { visibility: visible; } input[type="radio"]:root body p:nth-of-type(2) { color:green; } </style> <body> <p> Q.1 <label><input type="radio" name="q1" value="yes" id="q1y"> YES</label> <input type="radio" name="q1" value="no" id="q1n"> <label for="q1n">NO</label> <label>その他:<input type="text" name="q1"></label> </p>
- jjon-com
- ベストアンサー率61% (1599/2592)
http://okwave.jp/qa/q7279331.html の私の回答No.1
お礼
ありがとうございました。 参考になりました。
補足
ありがとうございます。 教えて頂いたソースにonmouseoutを加えてイメージする動作が可能なような気がします。 できたら改めて報告します。
- やぎ じじい（@yagijijii）
- ベストアンサー率56% (63/112)
検索しても意外と見つからないようです。また、他にレスが付かないようなので、 一応私が考えたプログラムコードを掲載します。 但し素人プログラマなので、プロの方からすれば邪道といわれるかもしれません。 →JavaScriptは、目的が同じなのに全く違うコードでも動作します <html> <head> <title>ラジオボタン</title> <script type='text/javascript'> var disp = '<input type="radio" name="name2" value="Yes" checked>Yes <input type="radio" name="name2" value="No">No <br><input type="text">'; function sel1(){ document.getElementById("id2").innerHTML = disp; } function sel2(){ document.getElementById("id2").innerHTML = ""; } </script> </head> <body> <div id="id1"> <input type="radio" name="name1" value="Yes" onclick="sel1()" checked>Yes <input type="radio" name="name1" value="No" onclick="sel2()">No </div> <div id="id2"> <input type="radio" name="name2" value="Yes" checked>Yes <input type="radio" name="name2" value="No">No <br><input type="text"> </div> </body> </html>
補足
ありがとうございます。 ただ、IEとFireFoxで試しましたが、ラジオボタン２組と入力フィールド一つが常に表示され、変化ありませんでした。
お礼
ありがとうございました。 innerHTMLが反則だとは思わないのですが.... かえって、hiddenにするとそのスペースが空白として残ってしまうので、自分の欲しい動作に一番近いものでした。