inari111 blog

Webエンジニアの備忘録

ラジオボタンで表示項内容を切り替える

選択肢が複数あって、ラジオボタンによって表示項目を切り替えたい場合のメモ

JavaScript初心者だから、ちゃんと勉強せねば。

HTML

<table>
    <tr>
        <th></th>
        <td>
            <label><input type="radio" name="status" onclick="register();" checked="checked">ほげ1の場合</label>
            <label><input type="radio" name="status" onclick="register();">ほげ2の場合</label>
        </td>
    </tr>
</table>

<!--表示非表示の切り替え-->
<div id="hoge1_form">
        <table class="form_table">
            <tr>
                <th>
                    ほげ1 
                </th>
                <td>
                    <input type="text" />
                </td>
            </tr> 
        </table>
            
</div>

<!--表示非表示の切り替え-->
<div id="hoge2_form">
        <table class="form_table">
            <tr>
                <th>
                    ほげ2
                </th>
                <td>
                    <input type="text" />
                </td>
            </tr> 
        </table>
            
</div>

JavaScript

function register() {
    radio = document.getElementsByName('status');
    if (radio[0].checked) {
        document.getElementById('hoge1_form').style.display = ""; 
        document.getElementById('hoge2_form').style.display = "none"; 
    } else if (radio[1].checked) {
        document.getElementById('hoge1_form').style.display = "none"; 
        document.getElementById('hoge2_form').style.display = "";
    }
}

//オンロードさせ、リロード時に選択を保持
window.onload = register;

これで選択した方のフォームが表示される。 JSって便利ー