JavaScript统计表单中Checkbox选中数量的实现方法
作者:拾光时间:2026-10-29 13:58:02浏览:245
本文介绍使用JavaScript统计HTML表单中多选框(checkbox)选中数量的方法。通过遍历指定名称的复选框组,计算被选中项的总数,适用于需要限制或验证用户选择数量的场景。
JavaScript统计表单中Checkbox选中数量的实现方法
本文详细介绍一种利用JavaScript统计HTML表单中多选框(checkbox)选中数量的方法,供开发者参考使用。
在实际开发中,检测复选框的选中状态并统计数量是常见需求。相较于简单的文本输入验证,判断多个checkbox的选择情况稍显复杂,因此这段代码具有较高的实用价值,读者可根据具体需求进一步完善。
运行效果如下图所示:

在线演示地址如下:
http://demo.jb51.net/js/2015/js-checkbox-chk-num-codes/
具体代码如下:
<!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>
<title>检测表单多选框的选择个数</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
<script language="javascript">
<!--
function anyCheck(form) {
var total = 0;
var max = form.ckbox.length;
for (var idx = 0; idx < max; idx++) {
if (eval("document.playlist.ckbox[" + idx + "].checked") == true) {
total += 1;
}
}
alert("您选择了 " + total + " 个选项!");
}
//-->
</script>
<form method="post" name="playlist">
1<input type="checkbox" name="ckbox" value="1">
2<input type="checkbox" name="ckbox" value="2">
3<input type="checkbox" name="ckbox" value="3">
4<input type="checkbox" name="ckbox" value="4">
5<input type="checkbox" name="ckbox" value="5">
6<input type="checkbox" name="ckbox" value="6">
<br><input type="button" value="检测选择个数" onClick="anyCheck(this.form)">
</form>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
