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 相关文章推荐
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
Vue制作Todo List网页
Apr 26 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
JavaScript原生数组函数实例汇总
Oct 14 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
关于页面优化和伪静态
2009/10/11 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python+opencv实现阈值分割
2018/12/26 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
客服工作职责
2013/12/11 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
电子信息专业自荐书
2014/02/04 职场文书
期中考试后的反思
2014/02/08 职场文书
给小学生的新年寄语
2014/04/04 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
关于学习的决心书
2015/02/05 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
创业计划书之酒厂
2019/10/14 职场文书