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 相关文章推荐
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
深入浅析javascript函数中with
Oct 28 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
如何封装Vue Element的table表格组件
Feb 06 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
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
python字典多条件排序方法实例
2014/06/30 Python
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python下载指定页面上图片的方法
2016/05/12 Python
python装饰器深入学习
2018/04/06 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
Django URL参数Template反向解析
2020/11/24 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
美国现代家具购物网站:LexMod
2019/01/09 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
社团文化节邀请函
2014/01/10 职场文书
小学生元旦感言
2014/02/26 职场文书
家长对学生的评语
2014/04/18 职场文书
安全宣传标语口号
2014/06/06 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
现实表现证明材料
2015/06/19 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
Django显示可视化图表的实践
2021/05/10 Python