前提・実現したいこと
ラジオボタンが5つあり、Aを選択するとAを表示してその他を非表示という作業をしています。
作業としてはうまくいってるのですが、5項目となるともっと楽な書き方があるのでは・・・と思いました。
該当のソースコード
html
1<table> 2 <tr> 3 <th></th> 4 <td> 5 <label><input type="radio" name="status" onclick="register();" checked="checked">ほげ1の場合</label> 6 <label><input type="radio" name="status" onclick="register();">ほげ2の場合</label> 7 </td> 8 </tr> 9</table> 10 11<!--表示非表示の切り替え--> 12<div id="hoge1_form"> 13 <table class="form_table"> 14 <tr> 15 <th>ほげ1</th> 16 <td><input type="text" /></td> 17 </tr> 18 </table> 19</div> 20 21<!--表示非表示の切り替え--> 22<div id="hoge2_form"> 23 <table class="form_table"> 24 <tr> 25 <th>ほげ2</th> 26 <td><input type="text" /></td> 27 </tr> 28 </table> 29</div> 30
js
1function register() { 2 radio = document.getElementsByName('status'); 3 if (radio[0].checked) { 4 document.getElementById('hoge1_form').style.display = ""; 5 document.getElementById('hoge2_form').style.display = "none"; 6 } else if (radio[1].checked) { 7 document.getElementById('hoge1_form').style.display = "none"; 8 document.getElementById('hoge2_form').style.display = ""; 9 } 10} 11
他に試したいこと
ボタン1つ選択して表示するだけでなく
2つ選択すると表示というバージョンも教えて頂けるとうれしいです。
回答2件
あなたの回答
tips
プレビュー