JQuery实现checkbox的全选/取消全选，实现类似于邮箱功能

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_30906185

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/youmeng/archive/2012/12/14/2817493.html

本文介绍了一种使用JQuery实现全选/取消全选功能的方法，并提供了完整的代码示例。该功能模仿了163邮箱中的全选操作，适用于需要批量选择功能的Web应用。

本人初学JQuery。写了一个实现checkbox的全选/取消全选，实现类似于163邮箱功能。

以下是代码，测试全部通过，请勿喷

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Script/jquery-1.7.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#SelectAll").click(function () {         //全选/取消全选
                $(":checkbox").attr("checked", this.checked);
            });
            $(":checkbox").click(function () {          //当选中某个子复选框时，SelectAll取消选中
                if (!this.checked) {
                    $("#SelectAll").attr("checked", false);
                }
            });
            $(":checkbox").click(function () {
                var chsub = $("input[name='subcheck']").length; //获取subcheck的个数
                var checkedsub = $("input[name='subcheck']:checked").length; //获取选中的subcheck的个数
                if (checkedsub == chsub) {
                    $("#SelectAll").attr("checked", true);
                }
            });
        });
    </script>
</head>
<body>
<input type="checkbox" value="全选" id="SelectAll" />全选/取消全选<br /><br />
<input type="checkbox" value="苹果" name="subcheck"  />苹果<br />
<input type="checkbox" value="雪梨" name="subcheck" />雪梨<br />
<input type="checkbox" value="荔枝" name="subcheck" />荔枝<br />
<input type="checkbox" value="樱桃"name="subcheck" />樱桃

</body>
</html>