需要计算按钮上的复选框单击它不起作用答案

【问题标题】：Need to count checkboxes on a button click on it does not work需要计算按钮上的复选框单击它不起作用
【发布时间】：2012-04-18 15:51:11
【问题描述】：

以下表单有 11 个复选框。我设置脚本以在单击按钮时执行一个函数，该函数会显示一个弹出窗口，告诉您选中了多少个复选框。但是，当我单击按钮时，什么也没有发生。我认为我的错误可能在于功能代码和辨别名称与 id 的使用等......但我不确定错误是什么。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
p {text-align:center}

</style>

    <title>My First Project</title>
</head>
<body>
<form id="form1" >

<table align=center>
<tr>
<td><input type="checkbox" name="ingredients" value="sausage" /> Italian Sausage<br /></td>
<td><input type="checkbox" name="ingredients" value="mushrooms" /> Fresh Mushrooms<br /></td>
<td><input type="checkbox" name="ingredients" value="pepperoni" /> Pepperoni<br /></td>
</tr>

<tr>
<td><input type="checkbox" name="ingredients" value="onions" /> Fresh Onions<br /></td>
<td><input type="checkbox" name="ingredients" value="ham" /> Diced Ham<br /></td>
<td><input type="checkbox" name="ingredients" value="peppers" /> Fresh Green Peppers<br /></td>
</tr>

<tr>
<td><input type="checkbox" name="ingredients" value="beef" /> Beef<br /></td>
<td><input type="checkbox" name="ingredients" value="tomatoes" /> Diced Tomatoes<br /></td>
<td><input type="checkbox" name="ingredients" value="bacon" /> Bacon Bits<br /></td>
</tr>

<tr>
<td><input type="checkbox" name="ingredients" value="green" /> Green Olives<br /></td>
<td><input type="checkbox" name="ingredients" value="olives" /> Ripe Olives<br /></td>
</tr>
</table>
<br />

<script type="text/javascript">

        function anyCheck(form) {
            var total = 0;
            var max = form.ckbox.length;
            for (var idx = 0; idx < max; idx++) {
                if (eval("document.form.ckbox[" + idx + "].checked") == true) {
                    total++;
                }
            }
            alert("You selected " + total + " boxes.");
        }


    }
</script>
<input type="button" name="submit" value="Submit" onclick="anyCheck(form1);"  />
</form>
</body>
</html>

更新代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
p {text-align:center}

</style>

    <title>My First Project</title>
</head>
<body>
<form id="form1" >

<table align="center">
<tr>
<td><input type="checkbox" name="ingredients" value="sausage" /> Italian Sausage<br /></td>
<td><input type="checkbox" name="ingredients" value="mushrooms" /> Fresh Mushrooms<br /></td>
<td><input type="checkbox" name="ingredients" value="pepperoni" /> Pepperoni<br /></td>
</tr>

<tr>
<td><input type="checkbox" name="ingredients" value="onions" /> Fresh Onions<br /></td>
<td><input type="checkbox" name="ingredients" value="ham" /> Diced Ham<br /></td>
<td><input type="checkbox" name="ingredients" value="peppers" /> Fresh Green Peppers<br /></td>
</tr>

<tr>
<td><input type="checkbox" name="ingredients" value="beef" /> Beef<br /></td>
<td><input type="checkbox" name="ingredients" value="tomatoes" /> Diced Tomatoes<br /></td>
<td><input type="checkbox" name="ingredients" value="bacon" /> Bacon Bits<br /></td>
</tr>

<tr>
<td><input type="checkbox" name="ingredients" value="green" /> Green Olives<br /></td>
<td><input type="checkbox" name="ingredients" value="olives" /> Ripe Olives<br /></td>
</tr>
</table>
<br />

<script type="text/javascript">

    function anyCheck() {
    var form = document.getElementById("form1"),
        inputs = form.getElementsByTagName("input"),
        i,
        total = 0;

    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].type.toLowerCase() === "checkbox" && inputs[i].checked)
            total++;
    }
    alert("You selected " + total + " boxes.");
}


    }
</script>
<input type="button" name="submit" value="Submit" onclick="anyCheck();"  />
</form>
</body>
</html>

【问题讨论】：

标签： javascript html forms function checkbox

【解决方案1】：

有几个问题：

您需要将字符串或元素传入anyCheck。我会做一个字符串。

onclick="anyCheck('form1')"

在anyCheck内部，您应该首先将表单的实际实例放入一个变量中，如下所示：

form = document.getElementById(form);

然后您可以使用 getElementsByTagName() 循环遍历表单中的每个项目

var inputs = form.getElementsByTagName("input");

for(var x = 0; x < inputs.length; x++) {
    var input = inputs[x];
    if(input.type != "checkbox") continue;

    if(input.checked) {
        total += 1;
    }
}

【讨论】：

【解决方案2】：

您的函数调用有问题。 form1 未定义。

使用 document.getElementById("form1");相反，像这样：

onclick="anyCheck(document.getElementById('form1'));"

编辑： 还有一些问题：

没有 ckbox 数组。要么为此创建一个数组，要么使用 form.elements 数组（它将为您提供所有表单元素，然后您可以检查它是否是一个复选框）。

而且你不需要调用 eval。

        for (var idx = 0; idx < max; idx++) {
            if (form.ckbox[idx].checked == true) {
                total++;
            }
        }

【讨论】：

【解决方案3】：

这适用于较新的浏览器（IE8+、FF 3.5+、Chrome）：

function anyCheck() {
        var total = 0;
        var max = document.querySelectorAll('[type=checkbox]');
        for (var idx = 0; idx < max.length; idx++) {
            if (max[idx].checked) {
                total++;
            }
        }
        alert("You selected " + total + " boxes.");
 }

演示：http://jsfiddle.net/6pNjf/1/

【讨论】：

【解决方案4】：

正如其他答案所说，anyCheck() 中的参数需要是对表单的引用。我将 id 作为字符串传递并在函数内部使用 document.getElementById() 。或者，如果只有一种形式，甚至不要将其作为参数，如下所示：

function anyCheck() {
    var form = document.getElementById("form1"),
        inputs = form.getElementsByTagName("input"),
        i,
        total = 0;

    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].type.toLowerCase() === "checkbox" && inputs[i].checked)
            total++;
    }
    alert("You selected " + total + " boxes.");
}

http://jsfiddle.net/ZxyPW/

您的代码试图使用不存在的ckbox 数组。我展示的是如何选择所有input 元素，然后测试每个元素是否都是选中的复选框。

您根本不需要使用eval，当然也不需要在数组（或类似数组的对象）中使用索引变量。

【讨论】：

您在关闭 </script> 标记之前有一个额外的关闭 }（在您的原始代码和更新代码中） - 这是一个语法错误，可能会停止脚本运行。跨度>

【解决方案5】：

试试这个代码。

您在传递表单以及如何访问表单中的元素时遇到了一些问题。我还强烈建议您使用内置 javascript 调试器的 IDE。VS 2010 是一款免费的，您可以使用它来开发 html 或 asp.net 代码。如果你愿意，你可以坚持使用直接的 html 代码。 IE。如果您打开正确的选项，则有一个内置的。

要使用调试器，您可以取消注释 //debugger 行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        body
        {
            background-color: Gray;
        }
        body
        {
            text-align: left;
        }
        p
        {
            text-align: center;
        }
    </style>
    <title>My First Project</title>
</head>
<body>
    <form id="form1">
    <table align="center">
        <tr>
            <td>
                <input type="checkbox" name="ingredients" value="sausage" />
                Italian Sausage<br />
            </td>
            <td>
                <input type="checkbox" name="ingredients" value="mushrooms" />
                Fresh Mushrooms<br />
            </td>
            <td>
                <input type="checkbox" name="ingredients" value="pepperoni" />
                Pepperoni<br />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="ingredients" value="onions" />
                Fresh Onions<br />
            </td>
            <td>
                <input type="checkbox" name="ingredients" value="ham" />
                Diced Ham<br />
            </td>
            <td>
                <input type="checkbox" name="ingredients" value="peppers" />
                Fresh Green Peppers<br />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="ingredients" value="beef" />
                Beef<br />
            </td>
            <td>
                <input type="checkbox" name="ingredients" value="tomatoes" />
                Diced Tomatoes<br />
            </td>
            <td>
                <input type="checkbox" name="ingredients" value="bacon" />
                Bacon Bits<br />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="ingredients" value="green" />
                Green Olives<br />
            </td>
            <td>
                <input type="checkbox" name="ingredients" value="olives" />
                Ripe Olives<br />
            </td>
        </tr>
    </table>
    <br />
    <script type="text/javascript">

        function anyCheck(form) 
        {
            //debugger;
            var total = 0;
            var max = form.length;
            for (var idx = 0; idx < max; idx++)
            {
                var element = form[idx];
                if(element.type == "checkbox" && element.checked)                
                {
                    total++;
                }
            }
            alert("You selected " + total + " boxes.");
        }
    </script>
    <input type="button" name="submit" value="Submit" onclick="anyCheck(document.getElementById('form1'));" />
    </form>
</body>
</html>

【讨论】：