JavaScript判断表单中多选框checkbox选中个数的方法_javascript技巧

本文实例讲述了JavaScript判断表单中多选框checkbox选中个数的方法。分享给大家供大家参考。具体如下:

这里使用JavaScript检测并判断出表单中多选框的选中个数,也就是checkbox被选择了多少,在以前,这个问题经常被各大论坛问到,因为检测checkbox不像检测输入框那么简单,尤其是判断个数也经常会遇到,所以说觉得这个Js代码还是很有用的,大家有兴趣的再完善一下。

运行效果如下图所示:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-checkbox-chk-num-codes/

具体代码如下:

<!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
, 判断
, checkbox
, 表单
, 多选框
选中个数
checkbox选中提交表单、checkbox被选中的表单、easyui checkbox 多选、checkbox多选传值、select checkbox 多选,以便于您获取更多的相关知识。

时间: 2024-08-29 23:45:22

JavaScript判断表单中多选框checkbox选中个数的方法_javascript技巧的相关文章

jquery判断复选框checkbox选中个数

首先引入jquery文件 <script type="text/javascript" src="js/jquery.js"></script> 判断check是否选中 多选框checkbox:  代码如下 复制代码  $("#chk1").attr("checked",'');//不打勾  $("#chk2").attr("checked",true);//打勾

jquery 统计复选框checkbox选中个数

以前我使用js只能判断遍历再获取, 例1  代码如下 复制代码 <!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> &l

动态获取复选框checkbox选中个数的jquery代码_jquery

今天碰到"jquery动态获取复选框checkbox选中的个数",首先看下面例子: 复制代码 代码如下: <input type="checkbox" checked="checked">python<br> <input type="checkbox" checked="checked">java<br> <input type="check

JavaScript获取文本框内选中文本的方法_javascript技巧

本文实例讲述了JavaScript获取文本框内选中文本的方法.分享给大家供大家参考.具体分析如下: 这里的代码可以用来获取用户通过鼠标在文本输入框或者textarea里选择的选本. 需要注意ie的问题. 代码如下: 复制代码 代码如下: <script type="text/javascript"> function getFieldSelection(select_field) {     word='';     if (document.selection) {   

javascript判断移动端访问设备并解析对应CSS的方法_javascript技巧

本文实例讲述了javascript判断移动端访问设备并解析对应CSS的方法.分享给大家供大家参考.具体分析如下: javascript判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的): 复制代码 代码如下: // 判断是否为移动端运行环境  if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel

js实现鼠标点击文本框自动选中内容的方法_javascript技巧

本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再去选择,省去了一些麻烦,提高了输入效率,用户肯定会喜欢这功能,那么实现的方法是怎么样呢?通过本代码你就搞明白了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-click

JavaScript限定复选框的选择个数示例代码_javascript技巧

有10个复选框,用户最多只能勾选3个,否则就灰掉所有复选框. (用户再次勾掉复选框时,仍然可以再次选择.) 将可变的部分设置为JS的参数,以实现代码复用. JS代码 第一个参数为复选框的name,第二个参数为最多允许的勾选值. 复制代码 代码如下: function choicetest(name,num){ var choicearr = document.getElementsByName(name); var a=0; for(var i=0;i<choicearr.length;i++)

jquery获取复选框checkbox的值实现方法_jquery

jQuery API : each(callback)::以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的option) js: //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋个null值

JavaScript使表单中的内容显示在屏幕上的方法

  本文实例讲述了JavaScript使表单中的内容显示在屏幕上的方法.分享给大家供大家参考.具体实现方法如下: 一.使内容水平出现 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html> <head> <title>测试</title> <script type="text/javascript"> function to() { var txt=document.getElement