javascript - 确保至少选中一个复选框

Question

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

JS (wrong)

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();">

So what I ended up doing in JS was this:

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")
 }

}

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

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);

您需要 Array.prototype.slice.call 部分将 document.querySelectorAll 返回的 NodeList 转换成一个数组，您可以调用一些。