jQuery 全选跟单选功能

最新推荐文章于 2023-05-03 09:09:34 发布

LA_zero

最新推荐文章于 2023-05-03 09:09:34 发布

阅读量155

点赞数

分类专栏： jQuery里table中全选跟单选文章标签： jQuery里table中全选跟单选

本文链接：https://blog.csdn.net/LIUrongfazero/article/details/103444524

版权

jQuery里table中全选跟单选专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery 全选跟单选功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>管理员列表</h2>
    <table border="1px" width="500px">
        <thead>
            <tr>
                <th><input type="checkbox" class="all"/>全选</th>
                <th>管理员ID</th>
                <th>姓名</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="it"/></td>
                <td>1</td>
                <td>Tester</td>
                <td>修改 删除</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="it"/></td>
                <td>2</td>
                <td>Manager</td>
                <td>修改 删除</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="it"/></td>
                <td>3</td>
                <td>Analyst</td>
                <td>修改 删除</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="it"/></td>
                <td>4</td>
                <td>Admin</td>
                <td>修改 删除</td>
            </tr>
        </tbody>
    </table>
    <script src="./jquery-3.4.1.js"></script>

    <script>
        $(".all").click(function(){
            if($(this).is(":checked")){
                // console.log(this.checked)
                $(".it").prop("checked",true);
            }else{
                // console.log(this.checked)
                $(".it").prop("checked",false);
            }
        })
    
        $("tbody input[type='checkbox']").click(function(){
            $("tbody input[type='checkbox']").each(function(){
                if($(this).is(":checked")==false){
                    // console.log(1)
                    $(".all").prop("checked",false);
                }else{
                    var unchecked = $("tbody>tr>td:first-child>input:not(:checked)")
                    // console.log(unchecked)
                    if(unchecked.length==0){
                        $(".all").prop("checked",true);
                    }else{
                        $(".all").prop("checked",false);
                    }
                }
            })
        })
        // $("tbody input[type='checkbox']").each(function(){
        //     if($(this).is(":checked")==false){
        //         $(".all").prop("checked",false);
        //     }else{
        //         var unchecked = $("tbody>tr>td:first-child>input:not(:checked)")
        //         if(unchecked==null){
        //             $(".all").prop("checked",true);
        //         }else{
        //             $(".all").prop("checked",false);
        //         }
        //     }
        // })
    </script>
</body>
</html>