tk.memo_data-input-page

備忘録
入力フィールドをラジオボタンの選択した項目によって制御する


<html>
<body>
    <!-- div-0: Yes/No ラジオボタン -->
    <div id="div-0">
        <input type="radio" name="1Radio" id="Radio-yes" value="0">
        <label for="Radio-yes">Yes</label>
        <input type="radio" name="1Radio" id="Radio-no" value="div-1">
        <label for="Radio-no">No</label>
    </div>
    <!-- div-1 から div-5 を含む表示領域 -->
    <div id="hidable-item">
        <!-- div-1: Me/Other ラジオボタン -->
        <div id="div-1" class="content-item">
            <input type="radio" name="2Radio" id="me" value="div-1,div-2,div-3,div-5">
            <label for="me">Me</label>
            <input type="radio" name="2Radio" id="other" value="div-1,div-2,div-3,div-4,div-5">
            <label for="other">Other</label>
        </div>
        <!-- div-2: 名前入力欄 -->
        <div id="div-2" class="content-item">
            <input type="text" id="name-field" readonly>
        </div>
        <!-- div-3: かな入力欄 -->
        <div id="div-3" class="content-item">
            <input type="text" id="kana-field" readonly>
        </div>
        <!-- div-4: 選択欄 -->
        <div id="div-4" class="content-item">
            <select id="select-field">
                <option value="1">携帯</option>
                <option value="2">自宅</option>
                <option value="3">その他</option>
            </select>
        </div>
        <!-- div-5: 電話番号入力欄 -->
        <div id="div-5" class="content-item">
            <input type="text" id="tel-field">
        </div>
    </div>
    <script src="address.js"></script>
</body>
<html>



document.addEventListener("DOMContentLoaded", function() {
    // div要素の取得
    const div1 = document.getElementById("div-1");
    const div2 = document.getElementById("div-2");
    const div3 = document.getElementById("div-3");
    const div4 = document.getElementById("div-4");
    const div5 = document.getElementById("div-5");

    // 初期表示の設定
    div1.style.display = "none";
    div2.style.display = "none";
    div3.style.display = "none";
    div4.style.display = "none";
    div5.style.display = "none";

    // 1Radio のイベントリスナー
    document.getElementById("Radio-yes").addEventListener("change", function() {
        if (this.checked) {
            // Yes を選択した場合、div-1 を表示
            div1.style.display = "block";
        } else {
            // No を選択した場合、div-1 を非表示
            div1.style.display = "none";
        }
    });

    document.getElementById("Radio-no").addEventListener("change", function() {
        if (this.checked) {
            // No を選択した場合、div-1 を非表示
            div1.style.display = "none";
        } else {
            // Yes を選択した場合、div-1 を表示
            div1.style.display = "block";
        }
    });

    // 2Radio のイベントリスナー
    document.getElementById("me").addEventListener("change", function() {
        if (this.checked) {
            // Me を選択した場合、div-2、div-3、div-5 を表示し、テキストボックスの値を設定し、読み取り専用に設定
            div2.style.display = "block";
            div3.style.display = "block";
            div5.style.display = "block";
            document.getElementById("name-field").value = "Name";
            document.getElementById("kana-field").value = "Kana";
            document.getElementById("name-field").readOnly = true;
            document.getElementById("kana-field").readOnly = true;
        }
    });

    document.getElementById("other").addEventListener("change", function() {
        if (this.checked) {
            // Other を選択した場合、div-2、div-3、div-4、div-5 を表示し、テキストボックスの読み取り専用を解除
            div2.style.display = "block";
            div3.style.display = "block";
            div4.style.display = "block";
            div5.style.display = "block";
            document.getElementById("name-field").readOnly = false;
            document.getElementById("kana-field").readOnly = false;
        }
    });
});