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

解決済みの質問

ラジオボタンの選択に応じてインプットを表示する。

 お世話になります。

 現在、ラジオボタンの選択に応じてインプットのフィールドが表示されるようなHTMLフォームを作っているのですが、煮詰まってしまいました。どうしてもうまくいかないのですが、
<html>
<head>
<title>テスト</title>

<script type="text/javascript">
<!--
function checkradio( disp ) {
document.getElementById('input').style.display = disp;
}
//-->
</script>
</head>
<body>
<form action="xxx">
<p>
<input type="radio" name="domain" id="1" value="1" onclick="checkradio('none');" />
<label for="1">選択1</label><br />
<input type="radio" name="domain" id="2" value="2" onclick="checkradio('none');" />
<label for="2">選択2</label><br />
<input type="radio" name="domain" id="3" value="3" onclick="checkradio('block');" checked />
<label for="3">選択3</label><br />
</p>

<p id="input">
選択3の詳細を書いてください。:<input type="text" id="input" name="select3" value="" size="20" />
</p>
</form>
</body>
</html>

と、こんな感じで、3を選択した時しかインプットを表示できません。選択1や選択2を表示した時には、「選択1の詳細を書いてください。」または「選択2の詳細を書いてください。」と表示させたいのですが、どこをどんな風に直せばいいでしょうか?
それと同時に初期画面ではこのインプットを非表示にしてラジオボタンを選択した時に表示されるようにしたいと思っています。

よろしくお願いします。

投稿日時 - 2008-06-19 23:11:58

QNo.4114055

すぐに回答ほしいです

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

・ 以下のコードを参考にしてみてください。

------------------------------------------------------------
<html>
<head>
<title>テスト</title>
<style>
#inputx {
display: none;

}

</style>
<script type="text/javascript">
<!--
function checkradio( inp ) {
document.getElementById('num').innerHTML = "123".substring(inp.value-1,inp.value);
document.getElementById('inputx').style.display = 'block';
}
//-->
</script>
</head>
<body>
<form action="xxx">
<p>
<input type="radio" name="domain" id="1" value="1"
onclick="checkradio(this);" />
<label for="1">
選択1
</label>
<br />
<input type="radio" name="domain" id="2" value="2"
onclick="checkradio(this);" />
<label for="2">
選択2
</label>
<br />
<input type="radio" name="domain" id="3" value="3"
onclick="checkradio(this);" />
<label for="3">
選択3
</label>
<br />
</p>
<p id="inputx">
選択<span id="num"></span>の詳細を書いてください。:
<input type="text" id="input" name="select3" value="" size="20" />
</p>
</form>
</body>
</html>

投稿日時 - 2008-06-20 00:36:43

お礼

簡潔なソースをありがとうございます。とても参考になりました。
これからいろいろ改造できそうです。

ありがとうございます!

投稿日時 - 2008-06-20 21:51:38

ANo.1

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

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

回答(1)

あなたにオススメの質問