１．はじめに

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