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 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
js实现图片无缝滚动
Dec 23 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
微信小程序身份证验证方法实现详解
Jun 28 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
JavaScript如何实现图片处理与合成
May 29 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
php框架知识点的整理和补充
2021/03/01 PHP
js中数组Array的一些常用方法总结
2013/08/12 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
浅析python参数的知识点
2018/12/10 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
岗位职责的定义
2013/11/10 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
二手房购房意向书
2015/05/09 职场文书
大学生就业意向书
2015/05/11 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers