jquery统计用户选中的复选框的个数

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
</head>

<body>
<input type="checkbox" name="check" value="one"/>one<br/>
<input type="checkbox" name="check" value="two"/>two<br/>
<input type="checkbox" name="check" value="three"/>three<br/>
<input type="checkbox" name="check" value="four"/>four<br/>
<input type="checkbox" name="check" value="five"/>five<br/>
<input type="checkbox" name="check" value="six"/>six<br/>
<input type="checkbox" name="check" value="seven"/>seven<br/>
<button name="sub">提交</button>
<script type="text/javascript">
$("button[name=sub]").click(function(){
var len = $("input:checkbox:checked").length;
alert("你一共选中了"+len+"个复选框");
})
</script>
</body>
</html>

使用选择器得到所有被勾选的复选框元素的集合，然后通过判断元素的个数来得到用户勾选的个数。

有的时候，我们还对用户勾选复选框的个数做了限制，假设只能勾选三个，相应的代码是这样的：


代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
</head>

<body>
<input type="checkbox" name="check" value="one"/>one<br/>
<input type="checkbox" name="check" value="two"/>two<br/>
<input type="checkbox" name="check" value="three"/>three<br/>
<input type="checkbox" name="check" value="four"/>four<br/>
<input type="checkbox" name="check" value="five"/>five<br/>
<input type="checkbox" name="check" value="six"/>six<br/>
<input type="checkbox" name="check" value="seven"/>seven<br/>
<script type="text/javascript">
$("input:checkbox").click(function(){
var len = $("input:checkbox:checked").length;
if(len>3){
alert('亲，最多只能选三个哟~');
return false; //另刚才勾选的取消
}
})
</script>
</body>
</html>

赞 (0)

相关推荐

  • JQUERY复选框CHECKBOX全选,取消全选

    复制代码 代码如下: <script type="text/javascript"> $(function() { $("#checkall").click(function() { $("input[@name='checkname[]']").each(function() { $(this).attr("checked", true); }); }); $("#delcheckall").

  • jquery复选框CHECKBOX全选、反选

    使用方法:我们先把下面的JS保存为有个文件,到时候调用,淡然你也可以直接写在页面内,推荐使用前者,方便重用: 复制代码 代码如下: (function($){ $.fn.checkgroup = function(options){ //merge settings settings=$.extend({ groupSelector:null, groupName:'group_name', enabledOnly:false },options || {}); var ctrl_box=thi

  • jquery如何获取复选框的值

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:style><!-- --></mce:style><style mce_bogus="1"> &l

  • jquery操作复选框(checkbox)的12个小技巧总结

    1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项$('input:checkbox').each(function() {        if ($(this).attr('che

  • jquery获取复选框被选中的值

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:style><!-- --></mce:style><style mce_bogus="1"> &l

  • jQuery遍历页面所有CheckBox查看是否被选中的方法

    本文实例讲述了jQuery遍历页面所有CheckBox查看是否被选中的方法.分享给大家供大家参考.具体如下: $('#tbl').find(':checkbox').each(function(){ if ($(this).is(":checked")) { //操作 } }); 希望本文所述对大家的jQuery程序设计有所帮助.

  • Jquery获取复选框被选中值的简单方法

    复制代码 代码如下: <input type="button" id="btn5" value="获得选中的所有值"><input type="text" name="dd" id="dd" size="50"  />$("#btn5").click(function(){          var str="&q

  • checkbox全选/取消全选以及checkbox遍历jQuery实现代码

    复制代码 代码如下: <html> <head> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> </head> <body> <input type="checkbox" name="chk_list" id="chk_list_1" valu

  • jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码

    jQuery判断checkbox(复选框)是否被选中:if($("#id").attr("checked")==true) jQuery实现checkbox(复选框)选中.全选/反选代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

  • jquery判断checkbox(复选框)是否被选中的代码

    复制代码 代码如下: //是否被选中验证有选中的return true,否return false function mycheckbox() { var falg = 0; $("input[name='soft[]']:checkbox").each(function () { if ($(this).attr("checked")) { falg += 1; } }) if (falg > 0) return true; else return fals

  • Jquery遍历checkbox获取选中项value值的方法

    源码: 复制代码 代码如下: jQuery(function($){ $("input[name='key']:checkbox").click(function(){ var ids = ''; var flag = 0; $("#ids").attr("value",ids); $("input[name='key']:checkbox").each(function(){ if (true == $(this).attr

  • jquery实现勾选复选框触发事件给input赋值

    代码如下: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery点击复选框触发事件给input赋值-柯乐义</title><base target="_blank" /> <style type="text/css"> * { marg

  • jQuery实现遍历复选框的方法示例

    jQuery实现遍历复选框的方法示例

    本文实例讲述了jQuery实现遍历复选框的方法.分享给大家供大家参考,具体如下: 1.问题背景: 这里有10个复选框,根据选择的复选框获取其值,并将其值用"--"连接,插入到div中 2.实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>遍历复选框</title> <script type="tex

随机推荐