我正在使用一个表单，在该表单中，我将Input标记包含在样式为Cards的div中。目前，用户可以通过单击卡片来选择多个选项。我想要实现的是，用户只能选择一张卡片。如果他选择了其他卡片，则已经选择的卡片将变为未选择。我如何实现这一点？
点击卡片将类module-inactive添加到div，通过降低其不透明度使其看起来未选中。
下面是我的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");
}
})
);我希望我能解释我的问题。
2条答案
按热度按时间6yoyoihd1#
使用单选框，因为它们是互斥的。
将当前所有复选框更改为：
您不需要任何JavaScript就可以使此功能按您期望的方式工作。
guykilcj2#
您所描述的是一个
<input type="radio">元素（或多个同名的input元素）的功能，您可以使用单选按钮的:checked pseudo class来设置“cards”的样式。您可以使用
<label>将文本上的单击“Map”到单选按钮。每个输入元素上的值属性可以用于决定选择希望项。