单表单全选与取消

最新推荐文章于 2024-11-10 15:10:09 发布

bug生产机器

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量95

点赞数

文章标签： servlet javascript 前端

本文链接：https://blog.csdn.net/weixin_48472209/article/details/126841170

版权

 <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll">
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone14</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone13</td>
                    <td>7000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone12</td>
                    <td>6000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        
        var j_cbAll = document.getElementById('j_cbAll');
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');

        j_cbAll.onclick = function(){
            for(var i = 0;i < j_tbs.length;i++){
                    j_tbs[i].checked = this.checked;
            }
            
        }
        //下侧复选框全部选中上面全选才选中
        for(var i = 0; i < j_tbs.length;i++){
            j_tbs[i].onclick = function(){
                //控制全选按钮是否选中
                var flag = true;
                //每次点击，复选框都循环检查4个小按钮是否全被选中
                for(var i = 0; i < j_tbs.length;i++){
                     if(!j_tbs[i].checked){
                       flag = false;
                       break;
                     }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>

全选样式如图