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 相关文章推荐
Javascript string 扩展库代码
Apr 09 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
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
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
js 操作css实现代码
2009/06/11 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
会计实习生工作总结的自我评价
2013/10/07 职场文书
商务邀请函范文
2014/01/14 职场文书
工程承诺书怎么写
2014/05/24 职场文书
团拜会策划方案
2014/06/07 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
青年文明号申报材料
2014/12/23 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL