DOM与JQ（全选与反选）

最新推荐文章于 2020-09-27 13:25:20 发布

lhusailiu

最新推荐文章于 2020-09-27 13:25:20 发布

阅读量513

点赞数

本文链接：https://blog.csdn.net/lhusailiu/article/details/74502962

版权

全选和反选

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            patding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }


        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll"/>
            </th>
            <th>菜名</th>
            <th>饭店</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>红烧肉</td>
            <td>田老师</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>西红柿鸡蛋</td>
            <td>田老师</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>红烧狮子头</td>
            <td>田老师</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>日式肥牛</td>
            <td>田老师</td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    var all =document.getElementById("j_cbAll");
    var tb =document.getElementById("j_tb");
    var checkbox =tb.getElementsByTagName("input")
    all.onclick =function () {
        for (var i = 0; i < checkbox.length; i++) {
            checkbox[i].checked = all.checked
        }
    };
        for (var i = 0; i < checkbox.length; i++) {

            checkbox[i].onclick = function () {
                var isAllcheck = true
                for (var i = 0; i < checkbox.length; i++) {
                    if (checkbox[i].checked !== true) {
                        isAllcheck = false    //判断如果没有选中，就其全选为false,跳出循环，直到全部被选中就等于全选框
                        break;
                    }


                };

                all.checked = isAllcheck
            }
        }





</script>
</body>
</html>

以上是DOM操作全选和反选

JQ的全选和反选

 <script src="jquery-1.12.2.js" ></script>
    <script>
        $(function () {
           $("#j_cbAll") .on("click",function () {
               var eck=$(this).prop("checked")
               $("#j_tb").find(":checkbox").prop("checked","eck")


           });
            $("#j_tb").find(":checkbox").on("click",function () {
                var length1=$("#j_tb").find(":checkbox").length //获取所有复选框的个数
                var length2=$("#j_tb").find(":checked").length  //获取所有被选中的个数
                if(length1==length2) {     //判断是否被选中的个数是否等于当前所有选项框的个数
                    $("#j_cbAll").prop("checked",true)
                }
                else  {
                    $("#j_cbAll").prop("checked",false)
                }
            });
        });



    </script>

总结：js ; 先假设条件被选中，其判断里面所有是否被选中

JQ：判断是否被选中的个数是否等于当前所有选项框的个数，然后根据判断的结果执行全选的

JQ：获取本身元素固有的属性方法prop()

prop() :操作元素状态属性,参数1属性名,参数2属性值

添加自定义属性atttr()

$("#j_tb").find(":checkbox") :表示获取所有type为checkbox的input标签

$("#j_tb").find(":checked"): 表示获取tbody中所有checked状态为true的input标签

find()针对当前元素找里面的一些其他元素