首页 前端知识 jQuery-全选/全部选/反选

jQuery-全选/全部选/反选

2024-03-21 15:03:25 前端知识 前端哥 848 625 我要收藏

<!DOCTYPE html>
<html>
<head>
<title>jQuery-全选/全部选/反选</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    //页面加载完毕后执行
    $(function(){
        //获取所有复选框对象(以下都是获取复选框对象的方法) [name=items]是属性过滤器
        // const items = $(":checkbox[name=items]");
        // const items = $("[name='items']");
        const items = $(":checkbox");

        //全选按钮
        $("#checkedAllBtn").click(function(){
            //所有复选框的状态都变成选中状态
            items.attr("checked",true);
            //全选/全部选复选框的状态也变成选中状态
            $("#checkedAllBox").attr("checked",true);
        });

        //全不选按钮
        $("#checkedNoBtn").click(function(){
            //所有复选框的状态都变成非选中状态
            items.attr("checked",false);
            //全选/全部选复选框的状态也变成非选中状态
            $("#checkedAllBox").attr("checked",false);
        });

        //反选按钮
        $("#checkedRevBtn").click(function(){
            //使用循环函数each()对items数组进行遍历,遍历过程中执行函数体
            items.each(function(){
                //对复选框的状态赋相反值
                this.checked = !this.checked;
            });
            //判断复选框的选中状态数量,如果选中状态的数量等于4   ":checked"表示选中状态
            if ($("[name='items']:checked").length == 4) {
                $("#checkedAllBox").attr("checked",true);
            }else {
                $("#checkedAllBox").attr("checked",false);
            }
        });
        
        //提交按钮
        $("#sendBtn").click(function(){
            //对选中状态的复选框进行遍历
            $(":checkbox:checked").each(function(){
                //弹出复选框的value属性值
                alert(this.value);
            });
        });
        
        //全选/全不选复选框
        $("#checkedAllBox").click(function(){
            items.attr("checked",this.checked);
        });
        
        //全选/全不选复选框与items状态同步
        //复选框绑定鼠标点击事件
        $("[name='items']").click(function(){
            //判断复选框被选中的状态,等于4表示全部选中,结果是true,不等于4表示没有全部选中,结果是false
            //这种方式明显比上面进行if...else...语句精简
            const flag = $("[name='items']:checked").length == 4;
            $("#checkedAllBox").attr("checked",flag);
        });
    });
</script>
</head>
<body>
    <form method="post" action="http://localhost:8080">
        你爱好的运动是?<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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4055.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!