jQuery实现简单全选、反选、全不选功能

最新推荐文章于 2022-01-17 19:30:09 发布

原创最新推荐文章于 2022-01-17 19:30:09 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#全选 #反选 #全不选

jQuery 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的全选、反选和全不选功能的具体实现方式。通过简单的HTML页面配合jQuery脚本，可以轻松实现对一组复选框的全选、反选及全不选操作。

例子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {

            //全选
            //添加全选事件
            $("#Button1").click(function () {
                //获取属性名为name='checkbox'，然后添加checked= true，实现全选
                $("input[name='checkbox']").prop("checked", "true");
            });
            //反选
            //添加全饭选事件
            $("#Button2").click(function () {
                //获取属性名为name='checkbox'对其进行便利循环
                $("input[name='checkbox']").each(function () {
                    //判断checked属性值，如果有则删除，如果没有则添加
                    if ($(this).prop("checked")) {
                        $(this).removeAttr("checked")
                    }
                    else {
                        $(this).prop("checked", "true");
                    }
                });

            });
            //全不选
           //添加全不饭选事件
            $("#Button3").click(function () {
                //获取属性名为name='checkbox'，删除所有checked属性
                $("input[name='checkbox']").removeAttr("checked");

            });

        });
    </script>
</head>
<body>
    <div>
        <input id="Checkbox1" type="checkbox" name="checkbox"/>篮球
        <br />
        <input id="Checkbox2" type="checkbox" name="checkbox"/>乒乓球
        <br />
        <input id="Checkbox3" type="checkbox" name="checkbox"/>足球
        <br />
        <input id="Checkbox4" type="checkbox" name="checkbox"/>羽毛球
        <br />
        <input id="Checkbox5" type="checkbox" name="checkbox"/>台球
        <br />
        =================================================
        <br />
        <input id="Button1" type="button" value="全选" />
        <input id="Button2" type="button" value="反选" />
        <input id="Button3" type="button" value="全不选" />
    </div>
</body>
</html>

效果：