全选全不选

全选全不选

一、思路

　　1. 复选框的全选和全不选

　　 　首先循环遍历单选框，设置点击复选框事件，事件处理程序为把单选框的状态赋值为选中，否则就是全不选；

　　2. 单选框的全选和全不选

　　　首先遍历所有单选框，给每个单选框设置点击事件，然后我们可以根据单选数量和每选一次递增循环的数量作比较来设置；

二、效果图

 

 

 

 

三、代码

html

   <div class="warp">

        <table>

            <thead>

                <tr>

                    <th><input type="checkbox" id="checkedAll"></th>

                    <th>商品</th>

                    <th>价钱</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td><input type="checkbox"></td>

                    <td>铅笔</td>

                    <td>0.5</td>

                </tr>

                <tr>

                    <td><input type="checkbox"></td>

                    <td>钢笔</td>

                    <td>80</td>

                </tr>

                <tr>

                    <td><input type="checkbox"></td>

                    <td>签字笔</td>

                    <td>3</td>

                </tr>

                <tr>

                    <td><input type="checkbox"></td>

                    <td>圆珠笔</td>

                    <td>2</td>

                </tr>

                <tr>

                    <td><input type="checkbox"></td>

                    <td>画笔</td>

                    <td>800</td>

                </tr>

                <tr>

                    <td><input type="checkbox"></td>

                    <td>水笔</td>

                    <td>1</td>

                </tr>

            </tbody>

        </table>

    </div>

css

    <style>

        .warp{

            width: 600px;

            margin: 100px auto;

        }

        table{

            width: 400px;

        }

        table thead{

            background: #2a91db;

            color: #fff;

            font-size: 16px;

            text-align: center;

        }

        table input{

            width: 13px;

            padding: 2px;

            border: 1px solid #ccc;

            text-align: center;

            outline: none;

        }

        table tbody{

            text-align: center;

            color: black;

            font-size: 14px;

        }

        tbody tr:hover{

            background: #ccc;

        }

        tbody tr td:hover{

            cursor: pointer;

        }

    </style>

js

    <script>

        // 全选框

        var checkedAll = document.getElementById('checkedAll')

        // 单选框

        var check = document.querySelectorAll('tbody tr td input')

        // 单选框跟随复选框而变化 通过checked属性

        // 首先给复选框设置点击事件

        // 1 点击全选 单选都选中或取消

        checkedAll.onclick = function() {

            // 循环遍历出所有单选框

            check.forEach(item => {

                item.checked = this.checked//把复选框状态赋值给所有的单选框

            })

        }

        // 2 单选框全部选中才选复选框

        check.forEach(item => {

            item.onclick = function(){

                // 设置被选中数量

                var num = 0;

                check.forEach(item =>{

                    if( item.checked ){//如果单选框的选中状态是选中

                        num++

                    }

                })

                if(num == check.length){

                    checkedAll.checked = true;

                }else{

                    checkedAll.checked = false;

                }

            }

        })

    </script>