全选，全不选表格中商品

最新推荐文章于 2023-06-02 17:44:04 发布

乘风测码

最新推荐文章于 2023-06-02 17:44:04 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/alibabaad/article/details/119652254

版权

全选，全不选表格中商品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="table" border="1" width="100%" align="center" style="text-align: center;">
        <tr>
            <td colspan="5" align="left">
                <input id="uncheckBtn" type="button" value="全不选" />
                <input id="reverseBtn" type="button" value="反选" />
            </td>
 
        </tr>
        <tr>
            <th>全选<input id="all" type="checkbox" /></th>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
    </table>
</body>
<script>
    window.onload = function () {
 
        // 需求 : 全选
        // 1.1 获取全选按钮的选择框元素
        var all = document.getElementById("all");
        // 1.2 获取所有的 itemSelect 标签
        var itemSelects = document.getElementsByClassName("itemSelect");
 
        // 2. 给全选按钮绑定单击事件
        all.onclick = function () {
 
            // 3. 获取全选按钮的当前状态属性值
            // var checked = all.getAttribute("checked");  不适用
            var checked = all.checked;
            // alert("checked = " + checked);
 
            // 4. 遍历 itemSelects 数组
            for (var i = 0; i < itemSelects.length; i++) {
                itemSelects[i].checked = checked;
            }
        }
 
        // 需求 : 全不选
        var uncheckBtn = document.getElementById("uncheckBtn");
        uncheckBtn.onclick = function () {
            for (var i = 0; i < itemSelects.length; i++) {
                itemSelects[i].checked = false;
            }
            all.checked = false;
        }
 
        // 需求 : 反选
        var reverseBtn = document.getElementById("reverseBtn");
        reverseBtn.onclick = function () {
 
            // 定义一个 count 计算器
            var count = 0;
 
            // 遍历 itemSelects 数组
            for (var i = 0; i < itemSelects.length; i++) {
 
                // 方式一 : 判断
                if (itemSelects[i].checked == true) {
                    itemSelects[i].checked = false;
                } else {
                    itemSelects[i].checked = true;
                    // 计算为 true 的数量
                    count++;
                }
 
                // 方式二 : 取反
                // itemSelects[i].checked = !itemSelects[i].checked;
 
                // 方式三 : 让 checkbox 被点击一下. 方法: click();
                // itemSelects[i].click();
            }
 
            // 遍历结束后, 实现判断
            if (count == itemSelects.length) {
                all.checked = true;
            } else {
                all.checked = false;
            }
        }
    }
</script>
</html>

乘风测码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选，全不选表格中商品

全选，全不选表格中商品<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
复制链接

扫一扫