JS全选文本框

优质学生

已于 2024-04-22 17:03:42 修改

阅读量213

点赞数 3

文章标签： javascript 前端

于 2024-04-22 16:35:15 首次发布

本文链接：https://blog.csdn.net/2301_79223755/article/details/138082041

版权

pink老师 P105

需求：用户点击全选，则下面复选框全部选择，消除全选则全部取消。
分析：

全选复选框点击，可以得到当前按钮的 checked
把下面所有的小复选框状态checked，改为和全选复选框一致

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选文本框案例</title>
</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>
        // 1.获取元素
        //大复选框
        const checkAll = document.querySelector('#checkAll')
        //小复选框
        const cks = document.querySelectorAll('.ck')
        // 2.点击大复选框 注册事件
        checkAll.addEventListener('click', function(){
            //得到 当前大复选框的选中状态
            //console.log(this.checked)  //true选中 false未选中
            // 3.遍历所有的小复选框，让其选中
            for(let i = 0; i <cks.length; i++) {
                //cks[i].checked = checkAll.checked //拿到的是大复选框的值（与其同步）
                cks[i].checked = checkAll.checked  //此函数在checkAll中，this指向的为checkAll，效果与上行同样
            }
        })


        // 4.小复选框控制大复选框
        for(let i =0; i < cks.length; i++){
            //给所有小框添加点击事件
            cks[i].addEventListener('click', function (){
                //判断小框选中的个数 是否等于总数
                //一定要写道点击里面，因为每次要获取最新的个数
                //console.log(document.querySelectorAll('.ck:checked').length);  //将所有带有checked伪类的框选出，并获取个数
                checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length//判断是否等于总数，并返回布尔值
            })
        }
    </script>
</body>
</html>