🚾

【JavaScript】チェックボックスやラジオボタンが選択されているか判定するプログラムを作成（備忘録）

に公開
JavaScript
初心者
メモ
tech

１．はじめに

JavaScript の理解を深めるために、Youtube 動画を参考にプログラムを作成しました。
一部のプログラムを修正/変更しています。

２．サンプルプログラム

Sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
    <body>
        <input type="checkbox" id="checkSubscribe">
        <label for="checkSubscribe">購読する</label><br><br>

        <fieldset>
            <legend>決済方法を選択してください</legend>

            <div>
                <input type="radio" id="visaBtn" name="card">
                <label for="visaBtn">VISA</label>
            </div>
            <div>
                <input type="radio" id="masterCardBtn" name="card">
                <label for="masterCardBtn">MasterCard</label>
            </div>
            <div>
                <input type="radio" id="jcbCardBtn" name="card">
                <label for="jcbCardBtn">JCB</label>
            </div>
            <div>
                <input type="radio" id="americanExpressBtn" name="card">
                <label for="americanExpressBtn">American Express</label>
            </div>
            <div>
                <input type="radio" id="dinersClubBtn" name="card">
                <label for="dinersClubBtn">Diners Club</label>
            </div>
            <div>
                <input type="radio" id="payPalBtn" name="card">
                <label for="payPalBtn">PayPal</label><br><br>
            </div>
            <div>
                <button type="submit" id="cardSubmit">送信</button>
            </div>

            <p id="subscribeCheckResult"></p>
            <p id="paymentMethod"></p>
        </fieldset>
        <script src="Sample.js"></script>
    </body>
</html>
style.css
body {
    font-family: Verdana;
    font-size: 1.1em;
}

#cardSubmit {
        font-size: 0.9em;
}
Sample.js
document.getElementById("cardSubmit").onclick = function() {
    let checkSubscribe = document.getElementById("checkSubscribe");
    let visaBtn = document.getElementById("visaBtn");
    let masterCardBtn = document.getElementById("masterCardBtn");
    let jcbCardBtn = document.getElementById("jcbCardBtn");
    let americanExpressBtn = document.getElementById("americanExpressBtn");
    let dinersClubBtn = document.getElementById("dinersClubBtn");
    let payPalBtn = document.getElementById("payPalBtn");
    let subscribeCheckResult = document.getElementById("subscribeCheckResult");
    let paymentMethod = document.getElementById("paymentMethod");

    // チェックボックスがチェックされているか確認
    if (checkSubscribe.checked) {
        subscribeCheckResult.textContent = "購読済みです。";
    } else {
        subscribeCheckResult.textContent = "購読済みではありません。";
    }

    // どの決済方法か確認
    if (visaBtn.checked) {
        paymentMethod.textContent = "VISAで決済しています。"
    } else if (masterCardBtn.checked) {
        paymentMethod.textContent = "MasterCardで決済しています。"
    } else if (jcbCardBtn.checked) {
        paymentMethod.textContent = "JCBで決済しています。"
    } else if (americanExpressBtn.checked) {
        paymentMethod.textContent = "AMERICAN EXPRESSで決済しています。"
    } else if (dinersClubBtn.checked) {
        paymentMethod.textContent = "Diners Clubで決済しています。"
    } else if (payPalBtn.checked) {
        paymentMethod.textContent = "PayPalで決済しています。"
    } else {
        paymentMethod.textContent = "決済方法を選択してください。"
    }

    // 購読済みだが決済方法が選択されていないか確認
    if (checkSubscribe.checked &&
        !visaBtn.checked &&
        !masterCardBtn.checked &&
        !jcbCardBtn.checked &&
        !americanExpressBtn.checked &&
        !dinersClubBtn.checked &&
        !payPalBtn.checked
    ) {
        alert("購読する場合は決済方法を選択してください！");
    }
}

〇addEventListener() メソッドを使用した書き方

Sample.js
let cardSubmit = document.getElementById("cardSubmit");

cardSubmit.addEventListener("click", () => {
    let checkSubscribe = document.getElementById("checkSubscribe");
    let visaBtn = document.getElementById("visaBtn");
    let masterCardBtn = document.getElementById("masterCardBtn");
    let jcbCardBtn = document.getElementById("jcbCardBtn");
    let americanExpressBtn = document.getElementById("americanExpressBtn");
    let dinersClubBtn = document.getElementById("dinersClubBtn");
    let payPalBtn = document.getElementById("payPalBtn");
    let subscribeCheckResult = document.getElementById("subscribeCheckResult");
    let paymentMethod = document.getElementById("paymentMethod");

    // チェックボックスがチェックされているか確認
    if (checkSubscribe.checked) {
        subscribeCheckResult.textContent = "購読済みです。";
    } else {
        subscribeCheckResult.textContent = "購読済みではありません。";
    }

    // どの決済方法か確認
    if (visaBtn.checked) {
        paymentMethod.textContent = "VISAで決済しています。"
    } else if (masterCardBtn.checked) {
        paymentMethod.textContent = "MasterCardで決済しています。"
    } else if (jcbCardBtn.checked) {
        paymentMethod.textContent = "JCBで決済しています。"
    } else if (americanExpressBtn.checked) {
        paymentMethod.textContent = "AMERICAN EXPRESSで決済しています。"
    } else if (dinersClubBtn.checked) {
        paymentMethod.textContent = "Diners Clubで決済しています。"
    } else if (payPalBtn.checked) {
        paymentMethod.textContent = "PayPalで決済しています。"
    } else {
        paymentMethod.textContent = "決済方法を選択してください。"
    }

    // 購読済みだが決済方法が選択されていないか確認
    if (checkSubscribe.checked &&
        !visaBtn.checked &&
        !masterCardBtn.checked &&
        !jcbCardBtn.checked &&
        !americanExpressBtn.checked &&
        !dinersClubBtn.checked &&
        !payPalBtn.checked 
    ) {
        alert("購読する場合は決済方法を選択してください！");
    }
});

３．実行環境

・OS: Windows 11（バージョン 24H2）
・ブラウザ: Microsoft Edge（バージョン 140.0.3485.54）
・エディタ: Visual Studio Code（バージョン 1.104.0）

４．参考

・<input type="checkbox">
・【JavaScript】addEventListenerの使い方
・【js】onclickとaddEventListenerの違い
・#11 01:31:56 Checked property ✅

Discussion