确保至少选中一个复选框

Question

我有一个带有多个复选框的表单，我想使用 JavaScript 来确保至少选中一个。这就是我现在所拥有的，但无论选择什么，都会弹出一个警报。

JS（错误）

 function valthis(){
 if (document.FC.c1.checked) {
   alert ("thank you for checking a checkbox")
  } else  {
   alert ("please check a checkbox")
  }
}

HTML

 <p>Please select at least one Checkbox</p>
<br>
<br>
<form name = "FC">
<input type = "checkbox" name = "c1" value = "c1"/> C1
<br>
<input type = "checkbox" name = "c1" value = "c2"/> C2
<br>
<input type = "checkbox" name = "c1" value = "c3"/> C3
<br>
<input type = "checkbox" name = "c1" value = "c4"/> C4
<br>
</form>
<br>
<br>

<input type = "button" value = "Edit and Report" onClick = "valthisform();">

所以我最终在 JS 中做的是：

 function valthisform(){
 var chkd = document.FC.c1.checked || document.FC.c2.checked||document.FC.c3.checked|| document.FC.c4.checked

 if (chkd == true){

 } else {
    alert ("please check a checkbox")
 }

}

我决定放弃“谢谢”部分以适应作业的其余部分。非常感谢，每个人的建议都帮了大忙。

原文由 MegaSly 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您打算像 document.FC.c1 那样引用它们，则应避免使用两个同名的复选框。如果您有多个名为 c1 的复选框，浏览器将如何知道您指的是哪个？

这是一个非 jQuery 解决方案，用于检查是否选中了页面上的任何复选框。

 var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);

You need the Array.prototype.slice.call part to convert the NodeList returned by document.querySelectorAll into an array that you can call some on.

原文由 mash 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这应该工作：

 function valthisform()
{
    var checkboxs=document.getElementsByName("c1");
    var okay=false;
    for(var i=0,l=checkboxs.length;i<l;i++)
    {
        if(checkboxs[i].checked)
        {
            okay=true;
            break;
        }
    }
    if(okay)alert("Thank you for checking a checkbox");
    else alert("Please check a checkbox");
}

如果您对代码有疑问，请发表评论。

---

我使用 l=checkboxs.length 来提高性能。请参阅 http://www.erichynds.com/javascript/javascript-loop-performance-caching-the-length-property-of-an-array/

原文由 Alexandre Khoury 发布，翻译遵循 CC BY-SA 3.0 许可协议