Question

我有一个带有四个复选框的div，应该允许用户选择第一个复选框或从两个，三个和四个中选择一个组合，但不能一起选择。示例场景：

第一个复选框或第二个复选框
第一个复选框或第三个复选框
第一个复选框或第四个复选框
第一个复选框或（第二个和第三个）
第一个复选框或（第三个和第四个）
第一个复选框或（第二个和第四个）
第一个复选框或（第二，第三和第四）

div是这样的：

<div class="question" id="someFilters">
    <label>Some Suppliers</label>
        <div class="someclass">
            <form:checkbox id="firstcheckbox" value="First checkbox"/>
                <label class="inputtext">First Checkbox</label>
            <form:checkbox id="secondcheckbox" value="Second checkbox"/>
                <label class="inputtext">Second Checkbox</label>
            <form:checkbox id="thirdcheckbox" value="Third checkbox"/>
                <label class="inputtext">Third Checkbox</label>
            <form:checkbox id="fourthcheckbox" value="Fourth checkbox"/>
                <label class="inputtext">Fourth Checkbox</label>
        </div>
</div>

非常感谢您的帮助。

Answer 1

描述条件的逻辑很简单：
要么不选中第一个框，要么不选中所有其他框。

此脚本中的变量.as-console-wrapper { max-height: 100% !important; top: 0; }将基于是否满足该条件而分配一个布尔值。该赋值语句之所以有效，是因为先前已为变量valid分配了一个按顺序包含所有输入元素的NodeList（通过cs －尽管您可能想使用按名称或类或元素作为目标的选择器）其他属性。）

请注意，您发布的html格式不正确。具体来说，.querySelectorAll("input")不代表html元素。

<form:checkbox />

const cs = document.querySelectorAll("input");
document.querySelector("button").addEventListener("click", validate);

function validate(){
  const valid = !cs[0].checked || !cs[1].checked && !cs[2].checked && !cs[3].checked;
  console.log(valid ? "good" : "bad");
}

JavaScript允许一个复选框或一组复选框

1 个答案: