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滚动条回到顶部的代码
Dec 06 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
详解jQuery的核心函数和事件处理
Feb 18 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
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
node.js中watch机制详解
2014/11/17 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
一百多行python代码实现抢票助手
2018/09/25 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
pandas去除重复列的实现方法
2019/01/29 Python
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
大学生实习证明范本
2014/01/15 职场文书
红旗方阵解说词
2014/02/12 职场文书
总经理任命书
2014/03/29 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
选秀节目策划方案
2014/06/06 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
高三英语复习计划
2015/01/19 职场文书
保护校园环境倡议书
2015/04/28 职场文书
七年级作文之环保作文
2019/10/17 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
新手入门Mysql--概念
2021/06/18 MySQL