JavaScriptを使ってラジオボタンON/OFFにより要素(テキストボックス等)の表示、非表示をコントロールする方法

ラジオボタンON、OFFによって
要素の表示、非表示をコントロールするJavaScriptを探すのに
苦労したので備忘録として記録します。

今回紹介するソースコードを実装すると
入力Aのラジオボタンを押した時
入力Aのテキストボックスが表示され、入力Bのテキストボックスが非表示になります。

入力Bのラジオボタンを押した時
入力Aのテキストボックスが非表示になり、入力Bというテキストボックスが表示されます。
↓こんな感じになります。

　入力Aを表示
　入力Bを表示

　　入力B
　　
　

上記のソースコードは下記のような感じです！

<head>
<script type="text/javascript">
　function isDisplayA() {
　　document.getElementById("inputA").style.display = "block";
　　document.getElementById("inputB").style.display = "none";
　}
　function isDisplayB() {
　　document.getElementById("inputA").style.display = "none";
　　document.getElementById("inputB").style.display = "block";
　}
</script>
</head>

<body>
　<input type="radio" id="kind" value="入力A" onclick="isDisplayA()">入力Aを表示
　<input type="radio" id="kind" checked="checked" value="入力B" onclick="isDisplayB()">入力Bを表示

　<div id="inputA">
　　入力A
　　<textarea id="textA" name="textNameA" cols="20" rows="2"></textarea>
　</div>

　<div id="inputB">
　　入力B
　　<textarea id="textB" name="textNameB" cols="20" rows="2"></textarea>
　</div>
</body>

簡単に解説します。

「input type="radio"～」の部分がラジオボタンに該当します。
入力Aのラジオボタンに「onclick="isDisplayA()"」とあるので
入力Aのラジオボタンがクリックされると「isDisplayA()」という関数に飛びます。

「isDisplayA()」がJavaScriptにあたります。
「isDisplayA()」の処理はidがinputAのところを表示させ
idがinputBのところを非表示にするという意味です。

なので、JavaScriptにより、「div id="inputA"～/div」で囲んだところが表示され
「div id="inputB"～/div」で囲んだところが非表示になります。
入力Bのラジオボタンがクリックされた時は逆のことが起きます。