あぼかどブログ > Web > HTML > 選択したラジオボタンにより表示内容を切り替える(メモ)

選択したラジオボタンにより表示内容を切り替える(メモ)

htmlのform内で選択したラジオボタンにより表示項目を切り替える。
すぐ忘れてしまうので、メモを残します。
【初期状態】
ラジオボタン:非選択
表示項目:非表示

選択したラジオボタンにより表示内容を切り替え

【javascript記述】

<script type=”text/javascript”>
function Change(){
radio = document.getElementsByName(‘id‘)
if(radio[0].checked) {
document.getElementById(‘selectA‘).style.display = ””;
document.getElementById(‘selectB‘).style.display = ”none”;
}else if(radio[1].checked) {
document.getElementById(‘selectA‘).style.display = ”none”;
document.getElementById(‘selectB‘).style.display = ””;
}
window.onload = Change;
}
</script>

【フォーム記述】

<form action=”http://xxxxxxxxxxxxxxxxxxx” method=”POST” name=”InputForm”>
<input type=”radio” name=”id” value=”1” onclick=”Change();” />項目A<br />
<input type=”radio” name=”id” value=”2” onclick=”Change();” />項目B<br />
<br />
<div>【以下の表示を切り替える】<br />
<br />
<div id=”selectA” style=”display:none;”>項目Aを選択しました</div>
<div id=”selectB” style=”display:none;”>項目Bを選択しました</div>
</form>

上記を参考に、selectボックスでも利用可。

【前後の記事】
«
 
»
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です