确保至少选中一个复选框

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

}

我决定放弃"谢谢"部分以适应其余的任务.非常感谢你,每一个建议都真的有所帮助.

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部分的转换NodeList通过返回document.querySelectorAll到一个数组,你可以调用some上.

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/}

Answer 3

我会选择更实用的方法。自 ES6 以来，我们已经获得了如此出色的工具来解决我们的问题，那么为什么不使用它们呢？让我们从给复选框一个类开始，这样我们就可以很好地将它们围起来。我更喜欢使用类而不是 input[type="checkbox"] 因为现在该解决方案更通用，并且也可以在文档中有更多复选框组时使用。

HTML

    <input type="checkbox" class="checkbox" value=ck1 /> ck1<br />
    <input type="checkbox" class="checkbox" value=ck2 /> ck2<br />

JavaScript

function atLeastOneCheckboxIsChecked(){
    const checkboxes = Array.from(document.querySelectorAll(".checkbox"));
    return checkboxes.reduce((acc, curr) => acc || curr.checked, false);
}

调用时，如果没有选中复选框，则该函数将返回 false；如果选中一个或两个复选框，则返回 true。

它的工作原理如下，reducer 函数有两个参数，累加器 (acc) 和当前值 (curr)。对于数组上的每次迭代，如果累加器或当前值为真，则reducer 将返回真。前一次迭代的返回值是当前迭代的累加器，因此，如果它为真，它将一直保持为真直到结束。