在javascript中的每个复选框组中仅选择一个复选框 函数tryThis（元素）{ 如果（元素已选中）{ 元素。类列表。添加（“标记”）； }否则{ 元素。类列表。删除（“标记”）； } if（document.getElementsByClassName（“标记”）.length>1）{ 警报（“请仅选择一个复选框”）； 元素。选中=假； 元素。类列表。删除（“标记”）； } if（document.getElementsByClassName（“已标记”）.length==0）{ 警告（“请选择一个复选框”）； } }

这是我一直在尝试的代码的一个小示例（我从另一个线程中找到了这个函数）。我在这里遇到的问题是，我希望从每个复选框组中选择一个复选框，但结果是所有组都选择了一个复选框，即当我在“性别”中选择“男性”时，我应该能够在报告中选择“是”，但这并没有发生。我在这里遗漏了什么？

您可以使用单选按钮来完成

<script>
function tryThis(element){

    if(element.checked){
        element.classList.add("marked");
    }else{
        element.classList.remove("marked");
    }

    if(document.getElementsByClassName("marked").length>1){
      alert("Please select only one check box");
        element.checked=false;
        element.classList.remove("marked");
    }
    if(document.getElementsByClassName("marked").length==0){
         alert("Please select one check box");
    }
}
</script>
<div>
<input type="checkbox" name="gender" value="male" onclick="tryThis(this);"/>
<input type="checkbox" name="gender" value="female" onclick="tryThis(this);"/>
<input type="checkbox" name="gender" value="unknown" onclick="tryThis(this);"/>
</div>

<div>
<input type="checkbox" name="report" value="no" onclick="tryThis(this);"/>
<input type="checkbox" name="report" value="yes" onclick="tryThis(this);"/>
<input type="checkbox" name="report" value="other" onclick="tryThis(this);"/>
</div>

10-20
20-30
30+
女性
男性

---

“名称”属性组按钮

这可能是正确方向的开始。注意：我可以通过刷新页面来搞乱状态

<input type="radio" name="age" value="10">10-20
<input type="radio" name="age" value="20">20-30
<input type="radio" name="age" value="30">30+

<input type="radio" name="sex" value="female">Female
<input type="radio" name="sex" value="male">Male

---

如果只需要选中一个选项，为什么不使用无线组而不是复选框呢？嗯，这是一个要求，它应该只是复选框。允许您使用jquery吗？还有classList.toggle，这可能会使代码更简单。嗯，这是一个要求，它应该只是复选框戴尔1分钟前感谢您的建议Asaf。但是单选按钮解决不了我的问题。谢谢！我没有试着用这个团体的名字。

function tryThis(element){
    if(element.checked){
        element.classList.add("marked_" + element.name);
    }else{
        element.classList.remove("marked_" + element.name);
    }

    if(document.getElementsByClassName("marked_" + element.name).length>1){
      alert("Please select only one " + element.name + " check box");
        element.checked=false;
        element.classList.remove("marked_" + element.name);
    }
    if(document.getElementsByClassName("marked_" + element.name).length==0){
         alert("Please select one " + element.name + " check box");
    }
}