JavaScript--点击按钮实现复选框全选和反选功能

最新推荐文章于 2022-12-13 22:34:38 发布

陌听

最新推荐文章于 2022-12-13 22:34:38 发布

阅读量7.3k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/she_rryn/article/details/47817369

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

功能实现：

1、点击全选和反选按钮，实现复选框全选和部分选的功能

2、点击全选复选框，实现子复选框全选或全不选功能

完整代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

    </style>
</head>
<body>
    <table border="1">
        <tr>
            <th><input type="checkbox" class="choose-all-input" οnclick="clickChooseAllInput()" /></th>
            <th>学号</th>
            <th>姓名</th>
            <th>班级</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="choose-single" /></td>
            <td>001</td>
            <td>张三</td>
            <td>李四</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="choose-single" /></td>
            <td>002</td>
            <td>F20</td>
            <td>F20</td>
        </tr>
    </table>
    <button οnclick="clickChooseAllBtn()">全选</button>
    <button οnclick="clickChooseReverse()">反选</button>
</body>
<script type="text/javascript">
    var chooseAllInputEle = document.getElementsByClassName("choose-all-input")[0];
    var chooseSingleEles = document.getElementsByClassName("choose-single");
    function clickChooseAllInput() {
        if (chooseAllInputEle.checked) {
            choose("selected");
        } else {
            choose("");
        }
    }
    function clickChooseAllBtn() {
        chooseAllInputEle.checked = "checked";
        choose("selected");
    }
    function choose(status) {
        for (var i = 0; i < chooseSingleEles.length; i++) {
            chooseSingleEles[i].checked = status;
        }
    }

    function clickChooseReverse() {
        for (var i = 0; i < chooseSingleEles.length; i++) {
            if (chooseSingleEles[i].checked) {
                chooseSingleEles[i].checked = "";
            } else {
                chooseSingleEles[i].checked = "checked";
            }
        }
    }

</script>
</html>