JavaScript 实现全选 / 反选功能

JavaScript 实现全选 / 反选功能

　　版权声明：未经授权，内容严禁转载！　　

---

构建主体界面

编写 HTML 代码 和 CSS 代码，设计主题界面

<style>
    #user {
        width: 500px;
        text-align: center;
    }

    #user, #user th, #user td {
        border: 1px solid #000;
        border-collapse: collapse;
    }
</style>

<h1>管理员列表</h1>
<table id="user">
    <thead>
    <tr>
        <th><input type="checkbox">全选</th>
        <th>管理员ID</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>Tom</td>
        <td>删除修改</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td>Jayvee</td>
        <td>删除修改</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td>Mia</td>
        <td>删除修改</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>4</td>
        <td>Jack</td>
        <td>删除修改</td>
    </tr>
    </tbody>
</table>
<button id="reverse" type="button">反向选择</button>
<button id="del" type="button">删除选定</button>

　　　　

思路引导

　　设计完主体界面，接下来就要编写 JavaScript 脚本实现 全选/反选 功能，如果要单独建立一个新的 js 文件记得要在HTML界面进行导入命令，导入要在HTML界面最后。

　　因为浏览器加载页面的时候从上而下，如果将 JavaScript 文件放在 body上面，在浏览器加载 JavaScript 时HTML 文件的各个标签还没有加载，JavaScript中使用的标签会找不到，出现错误！

实现全选功能

编写JavaScript脚本代码实现 全选功能

// 1 .获取所有触发事件的元素：全选 四个复选框 反选 删除

// 全选
var chbAll = document.querySelector("#user thead tr th:first-child>input");
// console.log(chbAll);
// 四个复选框
var chbs = document.querySelectorAll("#user tbody tr td:first-child>input");
// console.log(chbs);
// 反选
var reverse = document.querySelector("#reverse");
// console.log(reverse);
// 删除选定
var del = document.querySelector("#del");
// console.log(del);

// 实现全选功能
// 绑定事件处理函数
chbAll.onclick = function () {
    //判断全选当前是否被选中

    //   第一种方法
    // if (chbAll.checked) {
    //     // 如果选中四个复选框全选中
    //     // 循环四个复选框设置 checked 为选中 true
    //     for (var i = 0; i < chbs.length; i++) {
    //         chbs[i].checked = true;
    //     }
    // }else {
    //     // 如果没选中四个复选框全不选中
    //     // 循环四个复选框设置 checked 为不选中 false
    //     for (var i = 0; i < chbs.length; i++) {
    //         chbs[i].checked = false;
    //     }
    // }

    // 第二种方法。
    // 上面方法太冗余，循环设置四个复选框的选中状态和上面全选框一致即可
    // 减少代码，简单！
    for (var i = 0; i < chbs.length; i++) {
        // chbs[i].checked = chbAll.checked;
        // 建议使用 this 关键字，以后万一改掉了 id 名字也不会影响~
        chbs[i].checked = this.checked;
    }

}

　　

实现四个小复选框的功能

1. 点击其中一个小复选框要判断这四个小的复选框是否全被选中，如果四个全被选中需要将全选按钮勾上。

2. 如果点击其中一个取消了选中，那么全选按钮就是取消的。

总结：点击之后要判断这小复选框是被选中还是取消，如果是选中，就要判断这四个是不是全选中，如果全选中则全选框被选中，如果不是则选中自己。如果点击之后是取消选中，则全选框一定是取消选中的。

继续编写 JavaScript 脚本代码，实现四个小复选框功能

// 为 tbody 中的每一个 chb 绑定事件处理函数
for (var i = 0; i < chbs.length; i++) {
    chbs[i].onclick = function () {
        // 判断当前chb是选中韩式取消操作
        if (this.checked) {
            // 如果选中，判断是否都是选中
            // （查找tbody中是否有 未被选中的）
            var unchecked = document.querySelector("#user tbody tr td:first-child>input:not(:checked)");
            if (unchecked == null) {
                // 如果没有，设置全选被选中
                chbAll.checked = true;
            }
        } else {
            // 如果是取消，则自己取消并且全选也取消
            chbAll.checked = false;
        }

    }
}

　　

实现 反向选择 和 删除选定 功能

编辑 JavaScript 脚本代码实现 反向选择 和 删除选定 功能

// 反选
reverse.onclick = function () {
    // 循环 实现反选
    for (var i = 0; i < chbs.length; i++) {
        chbs[i].checked = !chbs[i].checked;
    }
    // 如果选中，判断是否都是选中
    // （查找tbody中是否有 未被选中的）
    var unchecked = document.querySelector("#user tbody tr td:first-child>input:not(:checked)");
    if (unchecked == null) {
        // 如果没有，设置全选被选中
        chbAll.checked = true;
    } else {
        chbAll.checked = false;
    }
}

// 取消选定
del.onclick = function () {
    var checked = document.querySelectorAll("#user tbody tr td:first-child>input:checked");
    if (checked !== null) {
        for (var i = 0; i < checked.length; i++) {
            checked[i].checked = false;
        }
    }
    if (chbAll.checked) chbAll.checked = false;
}

　　

完整案例代码

 HTML + CSS

<style>
    #user {
        width: 500px;
        text-align: center;
    }

    #user, #user th, #user td {
        border: 1px solid #000;
        border-collapse: collapse;
    }
</style>

<h1>管理员列表</h1>
<table id="user">
    <thead>
    <tr>
        <th><input type="checkbox">全选</th>
        <th>管理员ID</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>Tom</td>
        <td>删除修改</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td>Jayvee</td>
        <td>删除修改</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td>Mia</td>
        <td>删除修改</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>4</td>
        <td>Jack</td>
        <td>删除修改</td>
    </tr>
    </tbody>
</table>
<button id="reverse" type="button">反向选择</button>
<button id="del" type="button">删除选定</button>

<script src="mJS.js"></script>

JavaScript 脚本

// 1 .获取所有触发事件的元素：全选 四个复选框 反选 删除

// 全选
var chbAll = document.querySelector("#user thead tr th:first-child>input");
// console.log(chbAll);
// 四个复选框
var chbs = document.querySelectorAll("#user tbody tr td:first-child>input");
// console.log(chbs);
// 反选
var reverse = document.querySelector("#reverse");
// console.log(reverse);
// 删除选定
var del = document.querySelector("#del");
// console.log(del);

// 实现全选功能
// 绑定事件处理函数
chbAll.onclick = function () {
    //判断全选当前是否被选中

    //   第一种方法
    // if (chbAll.checked) {
    //     // 如果选中四个复选框全选中
    //     // 循环四个复选框设置 checked 为选中 true
    //     for (var i = 0; i < chbs.length; i++) {
    //         chbs[i].checked = true;
    //     }
    // }else {
    //     // 如果没选中四个复选框全不选中
    //     // 循环四个复选框设置 checked 为不选中 false
    //     for (var i = 0; i < chbs.length; i++) {
    //         chbs[i].checked = false;
    //     }
    // }

    // 第二种方法。
    // 上面方法太冗余，循环设置四个复选框的选中状态和上面全选框一致即可
    // 减少代码，简单！
    for (var i = 0; i < chbs.length; i++) {
        // chbs[i].checked = chbAll.checked;
        // 建议使用 this 关键字，以后万一改掉了 id 名字也不会影响~
        chbs[i].checked = this.checked;
    }

}

// 为 tbody 中的每一个 chb 绑定事件处理函数
for (var i = 0; i < chbs.length; i++) {
    chbs[i].onclick = function () {
        // 判断当前chb是选中韩式取消操作
        if (this.checked) {
            // 如果选中，判断是否都是选中
            // （查找tbody中是否有 未被选中的）
            var unchecked = document.querySelector("#user tbody tr td:first-child>input:not(:checked)");
            if (unchecked == null) {
                // 如果没有，设置全选被选中
                chbAll.checked = true;
            }
        } else {
            // 如果是取消，则自己取消并且全选也取消
            chbAll.checked = false;
        }

    }
}

// 反选
reverse.onclick = function () {
    // 循环 实现反选
    for (var i = 0; i < chbs.length; i++) {
        chbs[i].checked = !chbs[i].checked;
    }
    // 如果选中，判断是否都是选中
    // （查找tbody中是否有 未被选中的）
    var unchecked = document.querySelector("#user tbody tr td:first-child>input:not(:checked)");
    if (unchecked == null) {
        // 如果没有，设置全选被选中
        chbAll.checked = true;
    } else {
        chbAll.checked = false;
    }
}

// 取消选定
del.onclick = function () {
    var checked = document.querySelectorAll("#user tbody tr td:first-child>input:checked");
    if (checked !== null) {
        for (var i = 0; i < checked.length; i++) {
            checked[i].checked = false;
        }
    }
    if (chbAll.checked) chbAll.checked = false;
}

结束了，这个案例用在 购物车 还是蛮好的~