web API-事件基础-全选文本框案例

最新推荐文章于 2024-09-30 15:42:36 发布

Q _Q

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量64

点赞数

文章标签：前端 javascript html css css3 html5

本文链接：https://blog.csdn.net/weixin_54021642/article/details/131601885

版权

代码：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8" />
    <title>全选反选案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

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

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

        .allCheck {
            width: 80px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th class="allCheck">
                <input type="checkbox" name="" id="checkAll" />
                <span class="all">全选</span>
            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck" />
            </td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck" />
            </td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥4999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck" />
            </td>
            <td>小米电视</td>
            <td>小米</td>
            <td>￥5999</td>
        </tr>
    </table>

    <script>
        // 获取事件源
        let checkAll = document.querySelector('#checkAll')  // 全选
        let cks = document.querySelectorAll('.ck')    // 复选框
        let all = document.querySelector('.all')    // 全选框旁的文本

        // 添加事件监听 全选框
        checkAll.addEventListener('click', function(){
            // console.log('ok')
            let isCheck = checkAll.checked  // 确认全选框的状态
            // 遍历复选框，和全选按钮保持同样状态
            for (let index = 0; index < cks.length; index++) {
                let ck = cks[index];
                ck.checked = isCheck
            }
            // 修改全选框旁的文本
            if(isCheck){
                all.innerHTML = '取消'
            }else{
                all.innerHTML = '全选'
            }
        })

        // 复选框
        for (let index = 0; index < cks.length; index++) {
            // 解套出所有子复选框
            let ck_out = cks[index];
            // 每个子复选框都添加事件监听
            ck_out.addEventListener('click',function(){
                // console.log('ok')
                // 点击一个子复选框，都检查所有复选框是否为true
                // for (let index = 0; index < cks.length; index++) {
                //     let ck_in = cks[index];
                //     // 当一个复选框为假时，全选框为假
                //     if(ck_in.checked === false){
                //         checkAll.checked = false
                //         all.innerHTML = '全选'  // 修改全选框旁的文本
                //         return  // 退出循环
                //     // 当复选框都为真时，全选框为真
                //     }else{
                //         checkAll.checked = true
                //         all.innerHTML = '取消'  // 修改全选框旁的文本
                //     }
                // }

                // ES6高级写法
                checkAll.checked = Array.from(cks).every(item => item.checked)
            })
        }
    </script>
</body>

</html>

效果图：