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的复制网页内容到WORD的实现代码
Feb 16 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
理解javascript中的闭包
Jan 11 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
Java 生成随机字符的示例代码
Jan 13 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
用ODBC的分页显示
2006/10/09 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
DWZ table的原生分页浅谈
2013/03/01 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Python实现按中文排序的方法示例
2018/04/25 Python
python requests.post带head和body的实例
2019/01/02 Python
Python 画出来六维图
2019/07/26 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
工地例会施工汇报材料
2014/08/22 职场文书
组工干部演讲稿
2014/09/02 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
销售开票员岗位职责
2015/04/15 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA