复选框全选_复选框全选选中所有复选框-优快云博客

本文链接：https://blog.youkuaiyun.com/tianranran/article/details/121782155

本文介绍如何利用JavaScript实现复选框全选功能，适用于前端开发，特别是Vue.js应用中。通过绑定事件和修改DOM状态，可以轻松实现全选和反选的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <div class="container">
        <table class="m-table">
            <caption>员工信息列表</caption>
            <tbody>
                <tr>
                    <th><input type="checkbox" class="checkbox-all" >全选</th>
                    <th>员工编号</th>
                    <th>员工名称</th>
                    <th>员工部门</th>
                    <th colspan="2">操作</th>
                </tr>
                <tr>
                    <td> <input type="checkbox" class="checkbox-item" ></td>
                    <td>1001</td>
                    <td>张三</td>
                    <td>技术部</td>
                    <td><a href="#">删除</a> </td>
                    <td><a href="#">编辑</a></td>
                </tr>
                <tr>
                    <td> <input type="checkbox"  class="checkbox-item" ></td>
                    <td>1002</td>
                    <td>李四</td>
                    <td>技术部</td>
                    <td><a href="#">删除</a> </td>
                    <td><a href="#">编辑</a></td>
                </tr>
                <tr>
                    <td> <input type="checkbox"  class="checkbox-item" ></td>
                    <td>1003</td>
                    <td>王二</td>
                    <td>技术部</td>
                    <td><a href="#">删除</a> </td>
                    <td><a href="#">编辑</a></td>
                </tr>
      
            </tbody>
        </table>
    </div>
    <script src="js/my.js"></script>
</body>
 
</html>

// /**
//  * 全选功能
//  *   1. 全选框设置点击事件
//  *   2. 判断全选框是否选中
//  *       如果全选框选中则，所有复选框全选中
//  *       如果全选框没选中， 所有复选框不选中
//  */
// function checkboxAll() {
//     var checkboxAllEle = document.querySelector('.checkbox-all')
//     var checkboxItemEles = document.querySelectorAll('.checkbox-item')
//     //全选框设置点击事件
//     checkboxAllEle.onclick = function () {

//         var state = checkboxAllEle.checked //布尔值,选中是true,未选中false
//         if (state) {
//             //所有复选框全选中
//             for (var i = 0; i < checkboxItemEles.length; i++) {
//                 checkboxItemEles[i].checked = true
//             }
//         } else {
//             // 所有复选框不选中
//             for (var i = 0; i < checkboxItemEles.length; i++) {
//                 checkboxItemEles[i].checked = false
//             }
//         }
//     }

// }

// /**
//  * 根据所有复选框状态，确定全选框状态
//  *    思路:  怎确定所有复选框状态?
//  *            1. 遍历所有复选框
//  *                  如果所有复选框都选中，则全选框选中
//  *                     定义一个布尔变量isChecked，如果所有复选框有一个没选中， isChecked = false
//  *            2. 比较所有复选框元素个数和选中状态的复选框元素个数          
//  */
// function checkboxItem() {
//     var checkboxAllEle = document.querySelector('.checkbox-all') //全选框节点
//     var checkboxItemEles = document.querySelectorAll('.checkbox-item') //所有复选框节点

//     //循环遍历所有复选框，绑定点击事件
//     for(var i = 0; i < checkboxItemEles.length; i++){
//         //绑定点击事件
//         checkboxItemEles[i].onclick = function(){

//             var isChecked = true //所有复选框是否选中，true表示全部选中，false表示没有全部选中
//             for(var i = 0; i < checkboxItemEles.length; i++){
//                 if(checkboxItemEles[i].checked == false){
//                     isChecked = false
//                     break;
//                 } 
//             }

//             //根据所有复选框状态确定全选框状态
//             if(isChecked){
//                 checkboxAllEle.checked = true
//             }else{
//                 checkboxAllEle.checked = false
//             }

//         }
//     }

// }

// function checkboxItemTwo(){
//     var checkboxAllEle = document.querySelector('.checkbox-all') //全选框节点
//     var checkboxItemEles = document.querySelectorAll('.checkbox-item') //所有复选框节点

//      //循环遍历所有复选框，绑定点击事件
//      for(var i = 0; i < checkboxItemEles.length; i++){
//          checkboxItemEles[i].onclick = function(){
//             //比较所有复选框元素个数和选中状态的复选框元素个数    
//             //获取选中状态复选框
//             var checkboxItemSelector = document.querySelectorAll('.checkbox-item:checked')
//             if(checkboxItemSelector.length == checkboxItemEles.length){
//                 checkboxAllEle.checked = true
//             }else{
//                 checkboxAllEle.checked = false
//             }

//          }
//      }
// }

// checkboxAll()
// // checkboxItem()
// checkboxItemTwo()