【JQuery】jquery获取用户选中的复选框数量

最新推荐文章于 2021-10-21 17:03:00 发布

Skyzc993

最新推荐文章于 2021-10-21 17:03:00 发布

阅读量7.1k

点赞数

分类专栏：前端填坑记文章标签： jquery

本文链接：https://blog.csdn.net/meng1404725/article/details/78929208

版权

前端填坑记专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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>

2————————————
限制勾选个数：

<!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>