需要对按钮单击它不起作用的按钮上的复选框进行计数
Need to count checkboxes on a button click on it does not work
以下表单有 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;
}
}
函数调用中存在问题。 表单 1 未定义。
使用 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++;
}
}
这
适用于较新的浏览器（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/
正如其他答案所说，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，当然也不需要在数组（或类似数组的对象）中使用索引变量。
试试这段代码。
您在传递表单以及如何访问表单中的元素时遇到了一些问题。 我还强烈建议您获得内置javascript调试器的IDE。 VS 2010是一个免费的，你可以用它来开发html或 asp.net 代码。 如果你愿意，你可以坚持使用直接的html代码。 即，如果您打开正确的选项，则具有内置选项。
若要使用调试器，可以取消注释//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>
相关文章：
- 复选框/单选按钮-添加所选项目的总价
- 单选按钮的验证(启用）&使用Jquery Optimization从复选框中选择submit按钮
- 单击单选按钮时选中所有复选框
- 在jquery中选中复选框时启用confirmbox按钮
- 基于单选按钮和复选框的数据表排序
- JavaScript - 如果未选中复选框，则取消选中单选按钮
- 如果未选中复选框，则禁用引导输入按钮
- 如果用户未选中复选框或选择按钮，如何为复选框或单选按钮设置一些默认值
- JavaScript - 如果选中任何复选框，请选择单选按钮
- 用于控制单选按钮的复选框
- 样式为 -webkit-外观的单选按钮:复选框:Chrome 中的不确定状态
- Ajax + 浏览器后退按钮 = 复选框不起作用
- 引导数据切换单选按钮/复选框选中属性
- 如何绑定引导按钮复选框和表单
- 按钮复选框不保存选中的
- 在Twitter Bootstrap 3按钮(复选框)仍然是灰色后，它是未检查的
- 在Highcharts中使用按钮/复选框显示/隐藏数据的示例
- 散景-检查复选框与按钮/复选框回调
- 单选按钮+复选框组合
- 尝试提交“按钮复选框”的集合
