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实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
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
php不使用插件导出excel的简单方法
2014/03/04 PHP
PHP单链表的实现代码
2016/07/05 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python重试装饰器的简单实现方法
2019/01/31 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏
排查MySQL生产环境索引没有效果
2022/04/11 MySQL
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers