dポイントプレゼントキャンペーン実施中！

ラジオボタンで入力フィールドを表示・非表示する

解決済

  • 質問者：bacchus047
  • 質問日時：
  • 回答数：7件

初歩的なJavaScriptの質問です。
”はい””いいえ”２値のラジオボタンで”はい”の時だけ質問フィールドや次のラジオボタンを表示したいと思っています。
このようなjavaScriptのサンプルソースがあったら教えて頂けないでしょうか。

よろしくお願いします。

通報する

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

質問の本文を隠す

A 回答 (7件)

No.7ベストアンサー

  • 回答者： yagijijii
  • 回答日時：

＞　ラジオボタン２組と入力フィールド一つが常に表示され、変化ありませんでした。



ＩＥ９、Firefox、Chrome、Safari、Operaで動作確認しましたが、ＯＫでした。
気になって、ここのコードをコピペしたら、確かに動きません。
原因は、var disp = の行に、余計な改行が入るためのようです。

いずれにしても、私の提案した内容は、表示、非表示を強引にinnerHTMLで操作すると
いう反則技なので、他の方のコードを利用してください。

ＰＳ
最初、onclickではなく、onchangeで作成していたら、ＩＥは不正な動作をしました。
これは、調べると有名なことのようです。今回私もいろいろタメになりました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
innerHTMLが反則だとは思わないのですが....
かえって、hiddenにするとそのスペースが空白として残ってしまうので、自分の欲しい動作に一番近いものでした。

通報する
お礼日時：2013/08/16 10:33

No.6

  • 回答者： cero_d
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
参考になりました。

通報する
お礼日時：2013/08/16 10:29

No.5

  • 回答者： babu_baboo
  • 回答日時：

<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
参考になりました。

通報する
お礼日時：2013/08/16 10:28

No.4

  • 回答者： babu_baboo
  • 回答日時：

#3です


以下はゴミです。ごめんなさい。
input[type="radio"]:root body p:nth-of-type(2) {
color:green;
}

この回答への補足

ありがとうございます。
動作的には正にこの通りなのですが、cssではなくjavascriptを使いたいです。

補足日時：2013/08/15 16:31
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
参考になりました。

通報する
お礼日時：2013/08/16 10:29

No.3

  • 回答者： babu_baboo
  • 回答日時：

「次のラジオボタンを表示」は、まだ(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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： jjon-com
  • 回答日時：

http://oshiete.goo.ne.jp/qa/7279331.html の私の回答No.1

この回答への補足

ありがとうございます。
教えて頂いたソースにonmouseoutを加えてイメージする動作が可能なような気がします。
できたら改めて報告します。

補足日時：2013/08/15 16:30
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
参考になりました。

通報する
お礼日時：2013/08/16 10:30

No.1

  • 回答者： yagijijii
  • 回答日時：

検索しても意外と見つからないようです。

また、他にレスが付かないようなので、
一応私が考えたプログラムコードを掲載します。
但し素人プログラマなので、プロの方からすれば邪道といわれるかもしれません。
　→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で試しましたが、ラジオボタン２組と入力フィールド一つが常に表示され、変化ありませんでした。

補足日時：2013/08/15 16:24
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報