实现单选卡片效果：点击新卡片自动取消已选卡片

我正在开发一个表单，把Input标签嵌套在卡片样式的div里。现在用户能点击卡片多选选项，需要改成仅单选：选中新卡片时，已选中的卡片自动取消选中状态。点击卡片时，通过给div添加module-inactive类降低透明度来显示未选中样式。

现有HTML代码 #

<div id="heat-one" class="module d-flex flex-column justify-content-center align-items-center">
    <input type="checkbox" class="module-check" id="card1">
    <p>Comb. Heat and Power</p>
</div>
<div class="add module module-inactive d-flex flex-column justify-content-center align-items-center">
    <input type="checkbox" class="module-check" id="card2">
    <p>Heat Pump</p>
</div>
<div class="add module module-inactive d-flex flex-column justify-content-center align-items-center">
    <input type="checkbox" class="module-check" id="card3">
    <p>Natural Gas Heating</p>
</div>
<div class="add module module-inactive d-flex flex-column justify-content-center align-items-center">
    <input type="checkbox" class="module-check" id="card4">
    <p>Wood Heating System</p>
</div>

现有JavaScript代码 #

const checkBoxes = document.querySelectorAll(".module-check");
checkBoxes.forEach((checkBox) =>
    checkBox.addEventListener("change", (e) => {
        if (checkBox.checked) {
            e.target.parentElement.classList.remove("module-inactive");
        } else {
            e.target.parentElement.classList.add("module-inactive");
        }
    })
);

方案一：改用Radio按钮（推荐） #

Radio按钮原生支持同组单选，只需给所有input设置相同的name属性，再调整JS逻辑即可：

修改后的HTML

<div id="heat-one" class="module d-flex flex-column justify-content-center align-items-center">
    <input type="radio" name="heating-option" class="module-check" id="card1" checked>
    <p>Comb. Heat and Power</p>
</div>
<div class="add module module-inactive d-flex flex-column justify-content-center align-items-center">
    <input type="radio" name="heating-option" class="module-check" id="card2">
    <p>Heat Pump</p>
</div>
<div class="add module module-inactive d-flex flex-column justify-content-center align-items-center">
    <input type="radio" name="heating-option" class="module-check" id="card3">
    <p>Natural Gas Heating</p>
</div>
<div class="add module module-inactive d-flex flex-column justify-content-center align-items-center">
    <input type="radio" name="heating-option" class="module-check" id="card4">
    <p>Wood Heating System</p>
</div>

修改后的JavaScript

const radioBoxes = document.querySelectorAll(".module-check");
radioBoxes.forEach((radio) => {
    radio.addEventListener("change", (e) => {
        // 给所有卡片添加未选中类
        radioBoxes.forEach(r => {
            r.parentElement.classList.add("module-inactive");
        });
        // 给当前选中的卡片移除未选中类
        e.target.parentElement.classList.remove("module-inactive");
    });
});

该方案利用原生radio的单选特性，代码简洁且符合表单语义化规范。

方案二：用JavaScript控制Checkbox实现单选 #

如果必须保留checkbox，可以在change事件触发时，强制取消其他所有checkbox的选中状态，并同步更新卡片样式：

修改后的JavaScript

const checkBoxes = document.querySelectorAll(".module-check");
checkBoxes.forEach((checkBox) => {
    checkBox.addEventListener("change", (e) => {
        if (checkBox.checked) {
            // 取消其他所有checkbox的选中状态，并添加未选中类
            checkBoxes.forEach(cb => {
                if (cb !== checkBox) {
                    cb.checked = false;
                    cb.parentElement.classList.add("module-inactive");
                }
            });
            // 当前选中的卡片移除未选中类
            e.target.parentElement.classList.remove("module-inactive");
        } else {
            // 取消当前选中时添加未选中类（若允许无选中状态则保留此分支）
            e.target.parentElement.classList.add("module-inactive");
        }
    });
});

注意：此方式允许用户取消所有选中项，若需强制至少选中一个，可删除else分支，或在取消时判断是否还有其他选中项，无选中项则重新勾选当前checkbox。

内容的提问来源于stack exchange，提问作者Ghazi 360