Jquery04-练习-全选,全不选,反选-CSDN博客

本文链接：https://blog.csdn.net/qq_44236958/article/details/112727152

Jquery练习

全选，全不选，反选

文章目录

Jquery练习
- 完整代码

给全选绑定单击事件

$("#checkedAllBtn").click(function () {
			$(":checkbox").prop("checked",true);
		});

给全不选绑定单击事件

	$("#checkedNoBtn").click(function () {
			$(":checkbox").prop("checked",false);
		})

反选单击事件

    $("#checkedRevBtn").click(function () {
                //查询全部的球类的复选框
                $(":checkbox[name='items']").each(function () {
                    // 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象
                    this.checked = !this.checked;
                });
                //
                //要检查 是否满选
                var allCount = $(":checkbox[name='items']").length;
                //在获取选中的球类的个数
                var checkedCount = $(":checkbox[name='items']:checked").length;

                // if (allCount == checkedCount) {
                // 	$("#checkedAllBox").prop("checked",true);
                // } else {
                // 	$("#checkedAllBox").prop("checked",false);
                // }


                $("#checkedAllBox").prop("checked", allCount == checkedCount);

            });

【提交】按钮单击事件

    $("#sendBtn").click(function () {
                //获取选中的球类的复选框
                $(":checkbox[name='items']:checked").click(function () {
                    alert(this.value);
                })
            });

给【全选/全不选】绑定单击事件

     $("#checkedAllBox").click(function () {

                //在事件function函数中, 有一个this对象 这个this对象 就是当前相应事件的dom对象
                $(":checkbox[name='items']").prop("checked", this.checked);
            })

给球类绑定单击事件

$(":checkbox[name='items']").click(function () {
    //要检查 是否满选
    //获取全部的球类个数
    // 获取全部的球类个数
    var allCount = $(":checkbox[name='items']").length;
    // 再获取选中的球类个数
    var checkedCount = $(":checkbox[name='items']:checked").length;
    $("#checkedAllBox").prop("checked", allCount == checkedCount);
})

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //给全选绑定单击事件
            $("#checkedAllBtn").click(function () {
                $(":checkbox").prop("checked", true);
            })


            //给全不选绑定单击事件
            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked", false);
            })


            //反选单击事件
            $("#checkedRevBtn").click(function () {
                //查询全部的球类的复选框
                $(":checkbox[name='items']").each(function () {
                    // 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象
                    this.checked = !this.checked;
                });
                //
                //要检查 是否满选
                var allCount = $(":checkbox[name='items']").length;
                //在获取选中的球类的个数
                var checkedCount = $(":checkbox[name='items']:checked").length;

                // if (allCount == checkedCount) {
                //     $("#checkedAllBox").prop("checked",true);
                // } else {
                //     $("#checkedAllBox").prop("checked",false);
                // }


                $("#checkedAllBox").prop("checked", allCount == checkedCount);

            });


            //【提交】按钮单击事件
            $("#sendBtn").click(function () {
                //获取选中的球类的复选框
                $(":checkbox[name='items']:checked").click(function () {
                    alert(this.value);
                })
            });


             给【全选/全不选】绑定单击事件
            $("#checkedAllBox").click(function () {

                //在事件function函数中, 有一个this对象 这个this对象 就是当前相应事件的dom对象
                $(":checkbox[name='items']").prop("checked", this.checked);
            })


            //给球类绑定单击事件
            $(":checkbox[name='items']").click(function () {
                //要检查 是否满选
                //获取全部的球类个数
                // 获取全部的球类个数
                var allCount = $(":checkbox[name='items']").length;
                // 再获取选中的球类个数
                var checkedCount = $(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop("checked", allCount == checkedCount);
            })


        })


    </script>
</head>
<body>

<form method="post" action="">

    你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全　选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反　选"/>
    <input type="button" id="sendBtn" value="提　交"/>
</form>

</body>
</html>