【JavaScript】フォーム要素を連動させる方法！

今回は、JavaScriptを使ったフォーム要素を連動させる方法について説明します！この記事のサンプルコードを見ることで、テキストボックス、チェックボックス、ラジオボタン、セレクトボックスの連動のさせ方などがわかるようになるかと思います。

フォーム要素を連動させる方法
まとめ

フォーム要素を連動させる方法

フォーム要素の連動でよく見かけるのが、テキストボックスAに入力したらテキストボックスBにも値が反映されるというもの。

テキストボックスの連動
チェックボックスの連動
ラジオボタンの連動
セレクトボックスの連動
スライダーと数値入力の連動
入力によるボタンの制御

６つの内容について、サンプルを動かしながらコードを確認してみてください！

テキストボックスの連動

テキストボックスA

テキストボックスB

<label for="textbox1">テキストボックスA</label>
<input type="text" id="textboxA" oninput="syncText()">
<label for="textbox2">テキストボックスB</label>
<input type="text" id="textboxB" readonly>

function syncText() {
    // テキストボックスAの値を取得
    var textboxAValue = document.getElementById('textboxA').value;
    
    // テキストボックスBにテキストボックスAの値を設定
    document.getElementById('textbox2').value = textbox1Value;
}

テキストボックスAに値を入力したら、テキストボックスA値を取得してテキストボックスBのvalueに設定。

チェックボックスの連動

すべて選択
A B C D←チェック対象外

<input type="checkbox" id="selectAll"> すべて選択
<br>
<input type="checkbox" class="item"> A
<input type="checkbox" class="item"> B
<input type="checkbox" class="item"> C

const selectAll = document.getElementById("selectAll");
const items = document.querySelectorAll(".item");

selectAll.addEventListener("change", function() {
    items.forEach(cb => cb.checked = this.checked);
});

すべて選択に☑︎したら classに”item”がつくチェックボックスに対してforEachでチェック。

※チェックボックスDは、classを設定していないのでチェックがつきません

ラジオボタンの連動

クレジットカード銀行振込

<input type="radio" name="payment" value="card" id="card"> クレジットカード
<input type="radio" name="payment" value="bank" id="bank"> 銀行振込

<div id="cardInfo" style="display:none;">
    カード番号: <input type="text">
</div>
<div id="bankInfo" style="display:none;">
    銀行名: <input type="text">
</div>

document.querySelectorAll("input[name='payment']").forEach(radio => {
    radio.addEventListener("change", function() {
        document.getElementById("cardInfo").style.display = (this.value === "card") ? "block" : "none";
        document.getElementById("bankInfo").style.display = (this.value === "bank") ? "block" : "none";
    });
});

ラジオボタンを選択することで、テキストボックスを表示しラジオボタンにあったラベルを設定。

セレクトボックスの連動

<select id="prefecture">
    <option value="">都道府県を選択</option>
    <option value="tokyo">東京都</option>
    <option value="osaka">大阪府</option>
</select>

<select id="city">
    <option value="">市区町村を選択</option>
</select>

const cityData = {
    tokyo: ["新宿区", "渋谷区", "世田谷区"],
    osaka: ["大阪市", "堺市", "吹田市"]
};

document.getElementById("prefecture").addEventListener("change", function() {
    const citySelect = document.getElementById("city");
    citySelect.innerHTML = '<option value="">市区町村を選択</option>'; 

    if (this.value in cityData) {
        cityData[this.value].forEach(city => {
            let option = document.createElement("option");
            option.value = city;
            option.textContent = city;
            citySelect.appendChild(option);
        });
    }
});

セレクトボックスの都道府県に合わせて市町村を設定。

スライダーと数値入力の連動

<input type="range" id="slider" min="0" max="1000" value="500">
<input type="number" id="numberInput" min="0" max="1000" value="500">

const slider = document.getElementById("slider");
const numberInput = document.getElementById("numberInput");

slider.addEventListener("input", function() {
    numberInput.value = this.value;
});

numberInput.addEventListener("input", function() {
    slider.value = this.value;
});

スライダーを動かすと数値が変わり、数値を変えるとスライダーの位置が変化。

入力によるボタンの制御

<input type="text" id="name" placeholder="名前">
<input type="email" id="email" placeholder="メール">
<button id="submitBtn" disabled>送信</button>

function checkForm() {
    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;
    document.getElementById("submitBtn").disabled = !(name && email);
}

document.getElementById("name").addEventListener("input", checkForm);
document.getElementById("email").addEventListener("input", checkForm);

名前とメールに値があるかを確認し、両方とも入力されている場合にだけボタンを活性。