tk.memo_data-input-page

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

Yes No

Me Other

携帯 自宅 その他

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;
    }
});

});