js实现全选反选

最新推荐文章于 2023-07-11 22:34:21 发布

yangtz_1999

最新推荐文章于 2023-07-11 22:34:21 发布

阅读量912

点赞数

分类专栏：前端文章标签： js 全选反选

本文链接：https://blog.csdn.net/Young_Fee/article/details/79040941

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果：这里写图片描述

注意是双击全选反选！
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="button" value="全选" ondblclick="CheckAll();"/><!--双击-->
        <input type="button" value="取消" ondblclick="CancleAll();"/><!--双击-->
        <input type="button" value="反选" onclick="ReverseAll();"/><!--单击-->
    </div>
<table>
    <thead>
        <tr>
            <th>序号</th>
            <th>用户号</th>
            <th>年龄</th>
        </tr>
    </thead>
<tbody id="tb">
        <tr>
            <td><input class="c1" type="checkbox" /></td>
            <td>young</td>
            <td>21</td>
        </tr>
         <tr>
            <td><input class="c1" type="checkbox" /></td>
            <td>young</td>
            <td>21</td>
        </tr>
         <tr>
            <td><input class="c1" type="checkbox" /></td>
            <td>young</td>
            <td>21</td>
        </tr>
        <tr>
            <td><input class="c1" type="checkbox" /></td>
            <td>young</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

<script>
    function CheckAll(){
        var tb = document.getElementById('tb');
        var checks = tb.getElementsByClassName('c1');
        for(var i=0;i<checks.length;i++){
            var current_check = checks[i];
            current_check.checked = true;
        }
    }
    function CancleAll(){
        var tb = document.getElementById('tb');
        var checks = tb.getElementsByClassName('c1');
        for(var i=0;i<checks.length;i++){
            var current_check = checks[i];
            current_check.checked = false;
        }
    }
    function ReverseAll(){
        var tb = document.getElementById('tb');
        var checks = tb.getElementsByClassName('c1');
        for(var i=0;i<checks.length;i++){
            var current_check = checks[i];
            if (current_check.checked){
                current_check.checked = false;
            }else{
                current_check.checked = true;
            }
        }
    }
</script>
</body>
</html>

yangtz_1999

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现全选反选

效果：注意是双击全选反选！代码：html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>body> div> input type="button" value="全选" ondblclick="CheckAll();"/> input type="
复制链接

扫一扫