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 相关文章推荐
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 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
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
python 6种方法实现单例模式
2020/12/15 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
个人租房协议书样本
2014/10/01 职场文书
小学生学习保证书
2015/02/26 职场文书
以权谋私检举信范文
2015/03/02 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
经理岗位职责范本
2015/04/15 职场文书
九不准学习心得体会
2016/01/23 职场文书
MySQL池化框架学习接池自定义
2022/07/23 MySQL