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 相关文章推荐
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
jquery插件格式实例分析
Jun 16 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
微信小程序checkbox组件使用详解
Jan 31 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
ES6 解构赋值的原理及运用
May 25 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
php图片加中文水印实现代码分享
2012/10/31 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Python函数参数分类原理详解
2020/05/28 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
Internet体系结构
2014/12/21 面试题
编程实现去掉XML的重复结点
2014/05/28 面试题
《第一次抱母亲》教学反思
2014/04/16 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
python Tkinter的简单入门教程
2021/04/11 Python
Python基础之tkinter图形化界面学习
2021/04/29 Python
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
JavaScript的Set数据结构详解
2022/02/18 Javascript