gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:55:56 25 4
gpt4 key购买 nike

下面的表单有 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>

最佳答案

有几个问题:

您需要将字符串或元素传入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;
}
}

关于javascript - 需要计算按钮上的复选框单击它不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10019581/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com