js之全选和反选

最新推荐文章于 2023-07-11 22:34:21 发布

Julia_luofang

最新推荐文章于 2023-07-11 22:34:21 发布

阅读量1.4k

点赞数 1

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_43978453/article/details/105841376

版权

前端学习专栏收录该内容

10 篇文章 3 订阅

订阅专栏

全选和反选操作是js中常见的操作，在许多网站常常可以见到。因此，掌握好全选和反选操作的代码书写十分重要。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选和反选</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 300px;
            margin: 100px auto 0;
        }
        table{
            border-collapse:collapse;
            border: 1px solid #c0c0c0;
            border-spacing: 0;
            width: 300px;
        }
        th,td{
            border: 1px solid #d0d0d0;
            color: #404060;
            padding:10px;
        }
        th{
            background-color: #0099cc;
            font: bold 16px "微软雅黑";
            color: #ffffff;
        }
        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>iphone8</td>
                <td>80000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>ipad Pro</td>
                <td>50000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>ipad Air</td>
                <td>20000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Apple watch</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="反选" id="btn">
</div>

<script>
    // 全选
    //获取父的checkbox，注册点击事件
    var j_cbAll=document.getElementById("j_cbAll");
    var j_tb=document.getElementById("j_tb");
    //将j_tb里面所有的input标签都找到
    var inputs=j_tb.getElementsByTagName("input");
    //找到所有子的checkbox，让这些checkbox的状态跟父checkbox的状态一致
    j_cbAll.onclick=function () {
        //如果是checkbox，设置状态与父状态一致
        for(var i =0;i<inputs.length;i++){
            var input=inputs[i];
            if(input.type==="checkbox"){
                input.checked=this.checked;
            }
        }
    }

    //全选问题：当子的checkbox全部被选中，那父的checkbox也要被选中。如果有一个子的checkbox没有被选中，那么父的checkbox也不被选中
    //基本思路，每当点击了一个子的checkbox时，都要判断是否所有的checkbox都被选中了
    //遍历所有的checkbox注册点击事件
    for(var i = 0;i < inputs.length; i++) {
        var input = inputs[i];
        if (input.type != "checkbox") {
            continue;
        }
        //判断是不是所有的checkbox都被选中，给子checkbox注册点击事件
        input.onclick = function () {
            checkAllCheckBox();
        }
    }
    //判断父的checkbox的状态 封装成函数
    //判断是不是所有的子的checkbox都被选中，所以又要循环找到所有的checkbox进行判断
    function checkAllCheckBox() {
        //假设所有的子的checkbox都被选中
        var isAllChecked=true;

        //判断是不是所有的子的checkbox都被选中，所以又要循环找到所有的checkbox进行判断
        for(var j=0;j<inputs.length;j++){
            var input=inputs[j];
            if(input.type!="checkbox"){
                continue;
            }
            //判断当前的checkbox是否都被选中
            if(input.checked==false){
                isAllChecked=false;
            }
        }
        //设置父的checkbox的状态
        j_cbAll.checked=isAllChecked;
    }
    
    //反选
    //给反选按钮注册点击事件
    var btn=document.getElementById("btn");
    btn.onclick=function () {
        //找到所有的子的checkbox，让其反选
        for (var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            if (input.type != 'checkbox') {
                continue;
            }
            //反选
            //子的checkbox
            input.checked = !input.checked;
            //反选完之后要判断：父的checkbox
            checkAllCheckBox();
        }
    }
</script>
</body>
</html>