javascript - 如何在javascript中检查< 2和> 4复选框

Question

我正在尝试检查用户输入中是否选中大于 2 和小于 4 复选框。

我必须在提交表单之前进行此检查。

虽然我使用 AlloyUI 进行客户端验证。你可以用普通的 JavaScript 帮助我。

请帮我修改我的代码...

<% for(loop here which generates more than one checkbox) { %>
<form name=".." method=".." action=".." onSubmit="return checkBox();">
  <input type="checkbox" id=".." name=".."/>
</form>
%>

我的 JavaScript

function checkBox(){
        alert("start");
        var total = 0;
        var max = form.checkcompare.length;
        alert(max);
        for(var idx = 0; idx < max; idx++)
        {
        if(eval("document.compareform.checkcompare[" + idx + "].checked") == true)
        {
            alert("checking");
        total += 1;
        }
        }
        if (total==2 || total==4)
        {
        /*  document.compareform.submit(); */
        alert("success");
        }
        else
        {
            alert('Select minimum of 2 or maximum of 4 Estimates');
        }
        //alert("You selected " + total + " boxes.");
        }

它不起作用..有人可以帮忙吗..谢谢

Answer 1

我感觉你根本不知道自己在做什么。

首先，您要为每个复选框创建一个表单。打开表单标签，然后放入循环中添加复选框，然后关闭表单。

现在开始编写脚本...

form 未定义，因此您可以获取其元素。 form.checkcompare 未定义，因此您无法获取其长度。您可能希望在 onSubmit 事件 (onSubmit="return checkBox(this);") 和 function checkBox 中传递 this (表格)。然后使用 form.querySelectorAll('input[type=checkbox]');。

接下来，你到底为什么要使用邪恶的eval来获取数组索引？

好像这还不够，您说您想要“2 到 4 之间”，但您的代码认为“3”无效。

最后，您不会返回任何东西。

修复(和改进)代码:

function checkBox(form){ 
    var total = 0; 
    var boxes = form.querySelectorAll('input[type=checkbox]:checked').length;
    if (boxes < 2 || boxes > 4)
        return true;
    else { 
        alert('Select minimum of 2 or maximum of 4 Estimates'); 
        return false;
    } 
}