js-全选和取消全选

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
        }
        
        table th,
        td {
            border: 1px solid #ccc;
            background-color: royalblue;
            width: 100px;
            height: 26px;
            color: #fff;
        }
        
        table td {
            background: #eee;
            color: #333;
        }
        
        table td:first-child {
            text-align: center;
        }
    </style>
</head>

<body>
    <table cellpadding="5" cellspacing="0">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll">
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody class="j_cb">
            <tr>
                <td><input type="checkbox"></td>
                <td>iphone 8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iphone 7</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iphone 6</td>
                <td>3000</td>
            </tr>
        </tbody>
    </table>
    <script>
        //获取元素
        var j_cbAll = document.querySelector('#j_cbAll');
        var j_tbs = document.querySelector('.j_cb').querySelectorAll('input');
        //绑定事件
        j_cbAll.onclick = function() {
                for (var i = 0; i < j_tbs.length; i++) {
                    //this.checked 可以得到当前复选框的选中状态如果是true则代表选中,false则未选中
                    j_tbs[i].checked = this.checked;
                }
            }
            //下面复选框全部选中,上面的才能选中:给下面所有的复选框绑定点击事件,每次点击均循环查看下面的复选框是否都已选中,如果没有都选中,上面全选则不选
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                //flag 控制全选按钮是否选中
                var flag = true;
                //每次点击下面的复选框都循环检查是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; //退出for循环,可以提高执行效力,因为有一个没有选中,剩下的就无需循环
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

### Vue Element-ui `el-table` 组件实现全选取消全选功能 为了实现在 `el-table` 中的全选取消全选功能,可以利用 `el-table` 提供的选择事件以及一些自定义方法来管理已选项的状态。 #### HTML 部分 通过绑定 `@select-all` `@selection-change` 事件处理函数到表格上,可以在用户交互时捕获这些动作并作出响应。另外,设置 `row-key` 属性确保每一行都有唯一的键值用于精确控制选择状态[^1]。 ```html <template> <div> <!-- 表格 --> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" @select-all="selectAll" :row-key="getRowKeys"> <el-table-column type="selection" width="55"></el-table-column> <!-- 其他列配置... --> </el-table> <!-- 批量操作按钮 --> <button @click="toggleSelectAll">Toggle Select All</button> </div> </template> ``` #### JavaScript 方法 在脚本部分定义几个辅助函数用来处理不同的逻辑需求: - `getAllOptions`: 获取所有可选项的数据列表。 - `getSelectedOptions`: 返回当前被选中的项目集合。 - `selectAll(selection)`:此方法会在点击全选/反向全选时调用,参数 `selection` 是布尔类型的标志位表示是否要全部选中。 - `toggleSelectAll()`: 切换全选状态的方法,它会根据现有条件决定是要执行全选还是清空选择。 - `handleSelectionChange(val)`: 当前页面内所做任何单个或多个项目的选取都会触发这个回调函数;这里主要负责更新内部维护的选择记录数组 `_selectedRows`. ```javascript <script> export default { data() { return { tableData: [ { id: '1', name: 'Tom' }, { id: '2', name: 'Jerry' } // 更多数据... ], _allOptions: [], // 存储所有的选项 _selectedRows: [] // 记录已经选择了哪些行 }; }, mounted() { this.getAllOptions(); }, methods: { getRowKeys(row){ return row.id; }, getAllOptions(){ this._allOptions = [...this.tableData]; }, getSelectedOptions(){ const selectedIds = this._selectedRows.map(item => item.id); return this._allOptions.filter(option => selectedIds.includes(option.id)); }, selectAll(selection) { if (selection === true || selection.length > 0) { this.$refs.multipleTable.clearSelection(); // 清除原有选择 this._allOptions.forEach((item) => { this.$refs.multipleTable.toggleRowSelection(item, true); // 设置新选择 }); } else { this.$refs.multipleTable.clearSelection(); // 取消全选 } }, toggleSelectAll(){ let isAllSelected = this.getSelectedOptions().length >= this._allOptions.length; this.selectAll(!isAllSelected); }, handleSelectionChange(val) { this._selectedRows = val; console.log('Current Selection:', JSON.stringify(this._selectedRows)); // 如果需要同步其他地方显示,则在此处进行相应处理 } } }; </script> ``` 上述代码展示了如何在一个基于 Vue.js 的应用里使用 Element UI 库下的 `el-table` 来完成跨分页情况下的全选及批量删除等功能。注意这里的例子假设每一页都加载了完整的数据集以便于演示目的,在实际开发过程中可能还需要考虑更复杂的场景比如异步获取远程服务器上的分页数据等情形。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值