前端之 JS 实现全选、反选、取消选中

最新推荐文章于 2023-12-29 12:09:13 发布

weixin_30482383

最新推荐文章于 2023-12-29 12:09:13 发布

阅读量140

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/bigtreei/p/8196129.html

本文介绍了一个简单的JavaScript示例，用于实现HTML表格中复选框的全选、反选及取消选择功能。通过使用JavaScript操作DOM元素，可以轻松地实现这些功能。

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

需求

制作如下可选表格，实现“全选”、“反选”、“取消”功能

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!--告诉IE以最高级模式渲染文档-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>作业分解</title>
    <script>
        function checkAll() {
            //全选，找到所有的checkbox，全部选中
            var checkboxEles = document.getElementsByClassName("c1");
            for (var i=0;i<checkboxEles.length;i++){
                checkboxEles[i].checked=true;
            }
        }
        function reverse() {
            //反选--找标签，判断
            //1.找标签（和上面一样）
            var checkboxEles = document.getElementsByClassName('c1');
            //2.判断每个选框checkboxEles[i].checked 属性是true还是false
            //如果是true改为false；如果是false改为true

//            for循环+if判断 实现反选
//            for (var i=0;i<checkboxEles.length;i++){
//                    if (checkboxEles[i].checked=true){
//                        checkboxEles[i].checked=false;
//                    }else {
//                        checkboxEles[i].checked=true;
//                    }
//            }


//            取反，实现反选
            for (var i=0;i<checkboxEles.length;i++){
                checkboxEles[i].checked=!checkboxEles[i].checked;
            }
        }

        function cancleAll() {
            //取消选中
            var checkboxEles = document.getElementsByClassName("c1");
            for (var i=0;i<checkboxEles.length;i++){
                checkboxEles[i].checked=false;
            }
        }
    </script>
</head>
<body>

<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>技师姓名</th>
        <th>出生年份</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input class="c1" type="checkbox"></td>
        <td>张三</td>
        <td>10年</td>
    </tr>
    <tr>
        <td><input class="c1" type="checkbox"></td>
        <td>李四</td>
        <td>98年</td>
    </tr>
    <tr>
        <td><input class="c1" type="checkbox"></td>
        <td>王五</td>
        <td>99年</td>
    </tr>
    <tr>
        <td><input class="c1" type="checkbox"></td>
        <td>赵六</td>
        <td>97年</td>
    </tr>
    </tbody>
</table>

<br>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverse()">
<input type="button" value="取消" onclick="cancleAll()">
</body>
</html>