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 相关文章推荐
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 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
咖啡知识大全
2021/03/03 新手入门
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
把PHP安装为Apache DSO
2006/10/09 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
JavaScript字符串对象
2017/01/14 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python 3中的yield from语法详解
2017/01/18 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
python用match()函数爬数据方法详解
2019/07/23 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
给国外客户的邀请函
2014/01/30 职场文书
售后服务承诺书范文
2014/03/26 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android