jQuery prop和attr应用

软工小蜗牛 2022-04-28 原文

进行全选\全不选全选反选的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#checkedallbtn").click(function () { //全选
                $(":checkbox").prop("checked", true);
            })
            $("#checkednotbtn").click(function () {  //全不选
                $(":checkbox").prop("checked", false);
            })
            $("#checkedfanbtn").click(function () {  //反选
                $(":checkbox[name='items']").each(function () {
                    this.checked = !this.checked;   //代码简化
                });
　　　　　　　　　　//在反选之后判断是否选满
                var allqiu = $(":checkbox[name='items']").length;
                var checkedqiu = $(":checkbox[name='items']:checked").length;

                if (allqiu == checkedqiu) {
                    $("#checkedall").prop("checked", true);
                } else {
                    $("#checkedall").prop("checked", false);
                }
                // $("#checkedall").prop("checked",allqiu == checkedqiu);
            })
            $(":checkbox[name='items']").click(function () {  //在每个复选框选了之后判断是否选满
                var allqiu = $(":checkbox[name='items']").length;
                var checkedqiu = $(":checkbox[name='items']:checked").length;
                $("#checkedall").prop("checked", allqiu == checkedqiu);
            })
            $("#sub").click(function () {
                $(":checkbox[name='items']:checked").each(function () {
                    alert(this.value);
                })
            })
            $("#checkedall").click(function () {
                $(":checkbox").prop("checked", this.checked);
            })


        })
    </script>
</head>
<body>
你爱好的运动是？<input type="checkbox" id="checkedall">全选/全不选<br>
<input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items" value="篮球">篮球<input type="checkbox"name="items">羽毛球<input
        type="checkbox" name="items">乒乓球<br>
<button id="checkedallbtn">全选</button>
<button id="checkednotbtn">全不选</button>
<button id="checkedfanbtn">反选</button>
<button id="sub">提交</button>
</body>
</html>