至今头条

全选文本框示例

2023-08-17 17:27 由 弩哥++ 发表于 #前端开发

一、实现效果

  • 点击全选按钮/取消全选，控制商品的全选或取消
  • 每个商品的复选框都选中后，自动勾上全选按钮，或者商品任何一个复选框没有选中，取消全选

二、思路

  • 就是由大的全选按钮，控制所有的复选框
  • 小的复选框控制大的全选按钮

三、js中小的复选框控制大的全选框，用到了一个css伪类选择器

input:checked

举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        input:checked{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <input type="checkbox" >
</body>
</html>

四、完整的代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        div {
            margin: 100px auto;
            width: 500px;
            height: 300px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            height: 50%;
            text-align: center;
        }

        table tr th {
            background-color: #3899ce;
        }
    </style>
</head>
<body>
    <div>
        <table border="1">
            <thead>
            <tr>
                <th><input type="checkbox" class="check-all">全选</th>
                <th>商品</th>
                <th>商家</th>
                <th>价格</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>小米手机</td>
                <td>小米</td>
                <td>1999</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>小米净水器</td>
                <td>小米</td>
                <td>2999</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>小米电视</td>
                <td>小米</td>
                <td>3999</td>
            </tr>
            </tbody>
        </table>
    </div>


    <script>
        const checkAll = document.querySelector('.check-all')
        const checkList = document.querySelectorAll('tbody input')
        //大复选框控制小复选框
        checkAll.addEventListener('click', function () {
            //当点击全选按钮时，每一行的checked的状态会和全选/取消是一样的，所以要获取每一行的数据在进行更改
            for (let i = 0; i < checkList.length; i++) {
                checkList[i].checked = this.checked
            }
        })

        //由小的复选框控制大的复选框
        //如果勾选完每一行数据后，全选按钮自动选上，或者取消勾选一行数据，全选按钮自动取消

        //核心思想就是通过css的伪类选择器，找到选中的个数与总的复选框个数进行对比
        //如果选中个数===总个数，全选按钮就勾上，否则取消
        for (let i = 0; i < checkList.length; i++) {
            checkList[i].addEventListener('click', function () {
                checkAll.checked = document.querySelectorAll('tbody input:checked').length ===checkList.length

            })
        }
    </script>
</body>

</html>

热门相关：恭喜你被逮捕了   后福   豪门情变，渣总裁滚远点！   买妻种田：山野夫君，强势宠！   拒嫁豪门，前妻太抢手