菜单全选案例

最新推荐文章于 2022-05-23 15:17:18 发布

王小玖

最新推荐文章于 2022-05-23 15:17:18 发布

阅读量228

点赞数

本文链接：https://blog.csdn.net/weixin_46019220/article/details/103795721

版权

菜单全选案例

1、点击全按钮，则列表全部选中
2、有一个子列表取消选择，则全选框也取消
3、子列表全部选中，全选框也自动选中

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

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

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

        th,
        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 src="common.js"></script>
<script>
    /*
    * 分析 : 
    * 1. 操作全选的复选框, 点击选中, 下面所有列表的复选中都选中, 反之, 都不选中
    * 
    * 2. 操作列表中所有的复选框, 当点击所有的复选中都选中, 全选是选中的状态
    * 
    * */

    var cks = $myAll("#j_tb input");
    
    //1. 操作全选的复选框, 点击选中, 下面所有列表的复选中都选中, 反之, 都不选中
    $myId("j_cbAll").onclick = function () {
        //获取全选的状态
        var status = this.checked;
        for(var i = 0 ; i < cks.length ; i ++ ){
            cks[i].checked = status;
        }
        
    }

    //2. 操作列表中所有的复选框, 当点击所有的复选中都选中, 全选是选中的状态

    for(var j = 0 ; j < cks.length ; j++){
        cks[j].onclick = function () {
            // 通过逆向思维判断, 如果有一个没有被选中, 则全选未选中

            var flag = true; //假设的行为, 假设默认都被选中了

            for(var k = 0 ; k < 4 ; k++){
                //如果有一个没有被选中, 则全选未选中
                if(!cks[k].checked){

                    flag = false;
                    console.log(flag);
                }
            }
            $myId("j_cbAll").checked = flag;

            
        }
        
    }
    
    
    
    
    
</script>

</body>
 </html>