JavaScript实现全选和反选功能

JavaScript实现全选和反选功能

在做表单时经常会需要实现复选框的全选和反选效果,今天利用JS写了一个相对简单的全选和反选功能。

1. 获取DOM节点

var checkBigBox = document.querySelector('.bigBox')
var tbs = document.getElementById('tbody').getElementsByTagName('input')

2. 实现全选和反选功能

 // 全选和反选
        checkBigBox.addEventListener('click', function () { //利用事件监听
            for (var i = 0; i < tbs.length; i++) { //循环遍历tbody里面的复选框
                tbs[i].checked = this.checked  // 将每一个复选框的checked赋值全选框的checked 实现全选和反选
            }

        })

3. 实现下面复选框需要全部选中, 上面全选才能选中功能

for(var i=0;i<tbs.length;i++){
            tbs[i].addEventListener('click',function(){
                var flag = true //先定义flag为true
                for(var j=0;j<tbs.length;j++){ //循环遍历每一个复选框
                    if(!tbs[j].checked){ //如果有一个复选框没有被选中则将flag设为false
                        flag = false
                        break; //退出for循环 这样可以提高执行效率 因为只要有一个没有选中,剩下的就无需循环判断了
                    }
                }
                checkBigBox.checked = flag  //最后将flag的值赋值给全选框的checked
            })
        }

4. 整个HTML复制可以使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .table {
        width: 600px;
        margin: 100px auto 0;
    }

    table {
        /* 表格边框是否合并 */
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 600px;
    }

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

    th {
        background-color: #973c3f;
        font: bold 16px "微软雅黑";
        color: #fff;
    }

    td {
        font: 14px "微软雅黑";
    }

    tbody tr {
        background-color: #f0f0f0;
    }

    tbody tr:hover {
        cursor: pointer;
        background-color: #fafafa;
    }
</style>

<body>
    <div class="table">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" class="bigBox" />
                    </th>
                    <th>课程</th>
                    <th>学分</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>软件工程</td>
                    <td>4.0</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>JavaScript</td>
                    <td>4.0</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Vue</td>
                    <td>4.0</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Jquery</td>
                    <td>3.0</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>计算机网络</td>
                    <td>3.0</td>
                </tr>
            </tbody>
        </table>

    </div>
    <script>
        var checkBigBox = document.querySelector('.bigBox')
        var tbs = document.getElementById('tbody').getElementsByTagName('input')

        // 全选和反选
        checkBigBox.addEventListener('click', function () { //利用事件监听
            for (var i = 0; i < tbs.length; i++) { //循环遍历tbody里面的复选框
                tbs[i].checked = this.checked  // 将每一个复选框的checked赋值全选框的checked 实现全选和反选
            }

        })

        // 下面复选框需要全部选中, 上面全选才能选中做法
        for(var i=0;i<tbs.length;i++){
            tbs[i].addEventListener('click',function(){
                var flag = true //先定义flag为true
                for(var j=0;j<tbs.length;j++){ //循环遍历每一个复选框
                    if(!tbs[j].checked){ //如果有一个复选框没有被选中则将flag设为false
                        flag = false
                        break; //退出for循环 这样可以提高执行效率 因为只要有一个没有选中,剩下的就无需循环判断了
                    }
                }
                checkBigBox.checked = flag  //最后将flag的值赋值给全选框的checked
            })
        }
    </script>
</body>

</html>

注意:checked是复选框原本属性
以上就是JS实现全选和反选的做法啦☆*: .。. o(≧▽≦)o .。.:*☆

你可能感兴趣的:(javascript,开发语言,ecmascript)