Javascript 需要对按钮上的复选框进行计数单击按钮不起作用_Javascript_Html_Forms_Function_Checkbox

Javascript 需要对按钮上的复选框进行计数单击按钮不起作用

javascript html forms function checkbox

Javascript 需要对按钮上的复选框进行计数单击按钮不起作用,javascript,html,forms,function,checkbox,Javascript,Html,Forms,Function,Checkbox,下表有11个复选框。。我将脚本设置为在单击按钮时执行一个函数，该按钮将显示一个弹出窗口，告知选中了多少复选框。。但是，当我单击按钮时，什么也没有发生。我想我的错误可能是在函数代码和区分名称与id的用法等方面。。。但我不确定错误是什么 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h

下表有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>


正文{背景色：灰色；}
正文{文本对齐：左；}
p{文本对齐：居中}
我的第一个项目
意大利香肠

新鲜蘑菇

辣香肠

新鲜洋葱

火腿丁

新鲜青椒

牛肉

西红柿丁

培根块

绿橄榄

熟橄榄



函数anyCheck（表单）{
var合计=0；
var max=form.ckbox.length；
对于（var idx=0；idx


更新代码：
<!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>


正文{背景色：灰色；}
正文{文本对齐：左；}
p{文本对齐：居中}
我的第一个项目
意大利香肠

新鲜蘑菇

辣香肠

新鲜洋葱

火腿丁

新鲜青椒

牛肉

西红柿丁

培根块

绿橄榄

熟橄榄



函数anyCheck（）{
var form=document.getElementById（“form1”），
输入=form.getElementsByTagName（“输入”），
我
总数=0；
对于（i=0；i
函数调用中出现问题。form1未定义
使用document.getElementById（“form1”）；相反，像这样：
onclick="anyCheck(document.getElementById('form1'));"

form = document.getElementById(form);

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

编辑：
还有一些问题：
没有ckbox阵列。为此创建一个数组，或者使用form.elements数组（它将为您提供所有表单元素，然后您可以检查它是否为复选框）
你不需要打电话给eval
        for (var idx = 0; idx < max; idx++) {
            if (form.ckbox[idx].checked == true) {
                total++;
            }
        }

for（var idx=0；idx
这适用于较新的浏览器（IE8+、FF 3.5+、Chrome）：
函数anyCheck（）{
var合计=0；
var max=document.querySelectorAll（“[type=checkbox]”）；
对于（var idx=0；idx

演示：
有几个问题：
您需要将字符串或元素传入anyCheck。我会做一个字符串
onclick="anyCheck('form1')"

在anyCheck中，您应该首先将表单的实际实例放入变量中，如下所示：
onclick="anyCheck(document.getElementById('form1'));"

form = document.getElementById(form);

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

然后可以使用getElementsByTagName（）

var inputs=form.getElementsByTagName（“输入”）；
对于（变量x=0；x
正如其他答案所述，anyCheck（）
中的参数需要是对表单的引用。我将id作为字符串传入，并在函数中使用document.getElementById（）
。或者，如果只有一个表单，甚至不要将其作为参数，类似这样：
onclick="anyCheck(document.getElementById('form1'));"

form = document.getElementById(form);

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

函数anyCheck（）{
var form=document.getElementById（“form1”），
输入=form.getElementsByTagName（“输入”），
我
总数=0；
对于（i=0；i


您的代码试图使用不存在的ckbox
数组。我展示的是如何选择所有input
元素，然后测试每个元素是否都是选中的复选框
您根本不需要使用eval
，当然也不需要在数组（或类似数组的对象）中使用索引变量。
请尝试使用此代码
您在传递表单以及如何访问表单中的元素时遇到了一些问题。我还强烈建议您使用内置javascript调试器的IDE。VS2010是一个免费的版本，您可以使用它来开发html或asp.net代码。如果愿意，您可以坚持使用直接的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(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>


身体
{
背景颜色：灰色；
}
身体
{
文本对齐：左对齐；
}
P
{
文本对齐：居中；
}
我的第一个项目
意大利香肠

新鲜蘑菇

辣香肠

新鲜洋葱

火腿丁

新鲜青椒

牛肉

西红柿丁

培根块

绿橄榄