javaweb-------------------jQuery选择器练习（全选，反选）

最新推荐文章于 2023-01-08 23:17:14 发布

tutou_girl

最新推荐文章于 2023-01-08 23:17:14 发布

阅读量115

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/tutou_girl/article/details/112754125

版权

javaweb 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

练习：全选反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.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 () {
                        this.checked=!this.checked;
                });
                //反选同时检查全选/全不选
                var allcount=$(":checkbox[name='items']").length;
                var checkedcount=$(":checkbox[name='items']:checked").length;
                $("#checkedallbox").prop("checked",allcount==checkedcount);
            });
            //提交
            $("#commit").click(function () {
                //获取选中的items
                $(":checkbox[name='items']:checked").each(function () {
                    alert(this.value);
                })
            })
            //全选/全不选
            $("#checkedallbox").click(function () {
                //在事件的function函数中，有一个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>
        <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>
        <br>
        <input type="button" id="checkedallbtn" value="全选">
        <input type="button" id="checkednobtn" value="全不选">
        <input type="button" id="checkedrevbtn" value="反选">
        <input type="button" id="commit" value="提交">
    </form>
</body>
</html>