多个单选按钮组，检查“已选中”是否已更改

Question

您好，我有 2 个单选按钮组。我试图做到这一点，每当您选中第一组或第二组的不同单选按钮时，它都会触发获取请求。

let subscriptionType = document.querySelector('.membership-type-radio:checked').value;
let duration = document.querySelector('.duration-radio:checked').value;

.duration-box {
    display: flex;
    justify-content: space-between;
}

.duration-box .btn-label {
    flex-basis: 32%;
}

.btn-label {
    border: 2px solid var(--purple);
    color: var(--purple);
    text-align: center;
    height: 50px;
    border-radius: 10px;
    line-height: 50px;
}

.btn-label:hover {
    background-color: var(--purple);
    color: blue;
    cursor: pointer;
}

.membership {
    color: red;
}

.membership-options-container {
    display: flex;
    justify-content: space-between;
}

.membership-options-container .btn-label {
    flex-basis: 49%;
}

.membership-type-radio, .duration-radio {
    margin: 0;
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.membership-type-radio[type="radio"]:checked + .btn-label,
.duration-radio[type="radio"]:checked + .btn-label {
    background-color: var(--purple);
    color: red;
}

<div class="step">
                <h2 class="step-title">Abonnement</h2>
                <div class="membership-options-container">
                    <input type="radio" name="subscriptionType" value="daluren" class="membership-type-radio" id="daluren" checked />
                    <label for="daluren" class="btn-label">Daluren</label>
                    <input type="radio" name="subscriptionType" value="Premium" class="membership-type-radio" id="premium" />
                    <label for="premium" class="btn-label">Premium</label>
                </div>

                <div class="memberships-container">
                    <p>test</p>
                </div>
            </div>
            <div class="step">
                <h2 class="step-title">Looptijd</h2>
                <div class="duration-box">
                    <input type="radio" name="duration" value="104" class="duration-radio" id="104" checked />
                    <label for="104" class="btn-label">104 Weken</label>
                    <input type="radio" name="duration" value="52" class="duration-radio" id="52" />
                    <label for="52" class="btn-label">52 Weken</label>
                    <input type="radio" name="duration" value="4" class="duration-radio" id="4" />
                    <label for="4" class="btn-label">4 Weken</label>
                </div>
            </div>

当页面加载时，我得到了预选单选按钮的值，但我也想在变量发生变化时立即更新这些值。我已经尝试过这样的事件：

    let subscriptionTypes = document.querySelectorAll('.membership-type-radio');
subscriptionTypes?.forEach((type) => {
    type.addEventListener('change', (e) => {
        subscriptionType = e.target.value;
        console.log(subscriptionType);
    });
});

上面的代码确实更改了变量，但我正在寻找可重复用于多个字段的解决方案。

我也试过这个，它打印变量，但不更新它们：

let subscriptionType = document.querySelector('.membership-type-radio:checked').value;
let duration = document.querySelector('.duration-radio:checked').value; 
let inputs = document.querySelectorAll('.membership-type-radio, .duration-radio');
inputs?.forEach((type) => {
    type.addEventListener('change', (e) => {
        window[e.target.name] = e.target.value;
        console.log(subscriptionType, duration);
    });
});

Answer 1

这可以动态填充您的变量：

a = null;
b = null;
c = null;
document.querySelectorAll('input').forEach((el) => {
    el.addEventListener('change', (e) => {
        window[e.target.name] = e.target.value;
        console.log(a, b, c);
    });
});

<form>
  <input name="a">
  <input name="b">
  <input name="c">
</form>