JavaScript判断表单中多选框checkbox选中个数的方法


Posted in Javascript onAugust 17, 2015

本文实例讲述了JavaScript判断表单中多选框checkbox选中个数的方法。分享给大家供大家参考。具体如下:

这里使用JavaScript检测并判断出表单中多选框的选中个数,也就是checkbox被选择了多少,在以前,这个问题经常被各大论坛问到,因为检测checkbox不像检测输入框那么简单,尤其是判断个数也经常会遇到,所以说觉得这个Js代码还是很有用的,大家有兴趣的再完善一下。

运行效果如下图所示:

JavaScript判断表单中多选框checkbox选中个数的方法

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
jquery实现动静态条形统计图
Aug 17 #Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 #Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 #Javascript
js简单实现Select互换数据的方法
Aug 17 #Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 #Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 #Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 #Javascript
You might like
在JavaScript中调用php程序
2009/03/09 PHP
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
PHP实现合并discuz用户
2015/08/05 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
php实现文件上传基本验证
2020/03/04 PHP
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
手机端转换rem适应
2017/04/01 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
关于Vue组件库开发详析
2018/07/01 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
Python中获取网页状态码的两个方法
2014/11/03 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
行政主管岗位职责
2013/11/18 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
公司授权委托书范本
2014/09/18 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电