确保至少选中一个复选框

IT技术 javascript html checkbox
2021-02-22 08:56:10

我有一个带有多个复选框的表单,我想使用 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")
 }

}

我决定放弃“谢谢”部分以适应作业的其余部分。非常感谢,每个人的建议真的很有帮助。

6个回答

如果您打算像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.callNodeList返回部分转换为document.querySelectorAll您可以调用的数组some

“你应该避免有两个同名的元素” - 错误。使用重复的元素名称是有效的,适用于所有浏览器,并且一旦提交表单就可以在服务器端正常工作。正如 Mageek 所说,这是您创建无线电组的方式,但它也适用于其他表单元素。
2021-04-26 08:56:10
@nnnnnn 我更新了这个 4 年前的答案,因为它包含一些错误信息,还更新了更现代的解决方案。如果它仍然包含错误信息,或者您认为它需要任何其他改进,请告诉我。谢谢!
2021-05-01 08:56:10
@MartinJames 我很想知道您为什么认为这个答案如此糟糕。该解决方案运行良好,OP 已更新原始答案。
2021-05-03 08:56:10
@MashYou should never have two elements with the same names什么????那你怎么写收音机呢?
2021-05-04 08:56:10
谢谢,我希望避免使用 JQuery,但您的第二个建议帮助很大。
2021-05-12 08:56:10

这应该有效:

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/

谢谢。我正在搜索如何验证复选框,这对我有用
2021-04-18 08:56:10
在“okay=true”之后休息一下会优化一点:P
2021-04-20 08:56:10
@peshohristov 是的!我不知道我是怎么忘记放那个的。
2021-04-20 08:56:10
我被迫遇到这个问题,但你的代码解决了我的问题 +1
2021-05-04 08:56:10

我会选择更实用的方法。自 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 将返回真。前一次迭代的返回值是当前迭代的累加器,因此,如果它为真,它将一直保持为真直到结束。

检查这个。

您无法通过名称访问表单输入。改用document.getElements方法。

香草JS:

var checkboxes = document.getElementsByClassName('activityCheckbox'); // puts all your checkboxes in a variable

function activitiesReset() {
    var checkboxesChecked = function () { // if a checkbox is checked, function ends and returns true. If all checkboxes have been iterated through (which means they are all unchecked), returns false.
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                return true;
            }
        }
        return false;
    }
    error[2].style.display = 'none'; // an array item specific to my project - it's a red label which says 'Please check a checkbox!'. Here its display is set to none, so the initial non-error label is visible instead. 
        if (submitCounter > 0 && checkboxesChecked() === false) { // if a form submit has been attempted, and if all checkboxes are unchecked
            error[2].style.display = 'block'; // red error label is now visible.
        }
}

for (var i=0; i<checkboxes.length; i++) {  // whenever a checkbox is checked or unchecked, activitiesReset runs.
    checkboxes[i].addEventListener('change', activitiesReset);
}


说明:
一旦尝试提交表单,这将更新您的复选框部分的标签,以通知用户如果他/她尚未选中复选框。如果未选中复选框,则会显示隐藏的“错误”标签,提示用户“请选中复选框!”。如果用户选中至少一个复选框,红色标签会立即再次隐藏,显示原始标签。如果用户再次取消选中所有复选框,红色标签会实时返回。这是通过 JavaScript 的onchange事件(写成.addEventListener('change', function(){});