html之全选反选取消

最新推荐文章于 2021-06-15 17:23:45 发布

Quincy379

最新推荐文章于 2021-06-15 17:23:45 发布

阅读量1.1k

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_33733970/article/details/78203848

版权

HTML 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全选反选取消</title>
    <script>
        window.onload = function () {
            var aBtns = document.getElementsByClassName('btn');
            var aIpts = document.getElementsByTagName('input');
            for (var i=0;i<aBtns.length;i++){
                aBtns[i].onclick = function () {
                    if(this.innerHTML=='全选'){
                        for (var j=0;j<aIpts.length;j++){
                            aIpts[j].checked='checked'
                        }
                    }else if (this.innerHTML=='反选'){
                        for (var k=0;k<aIpts.length;k++){
                            //alert(aIpts[k].checked);
                            if(aIpts[k].checked){
                                aIpts[k].checked=''
                            }else{
                                aIpts[k].checked='checked'
                            }

                        }
                    }else {
                        for (var m=0;m<aIpts.length;m++){
                            aIpts[m].checked=''
                        }
                    }
                }
            }
        }
    </script>

</head>
<body>
<button id="selectAll" class="btn">全选</button>
<button id="reversePartial" class="btn">反选</button>
<button id="cancelSelect" class="btn">取消</button>
<br>
<hr>
<table border="1" style="border-collapse: collapse">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>

    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>

    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>

    <tr>
       <td><input type="checkbox"></td>
        <td>444</td>
        <td>444</td>
        <td>444</td>
    </tr>
</table>

</body>
</html>

根据button的文本进行判断处理，获取input标签进行处理

Quincy379

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html之全选反选取消

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale
复制链接

扫一扫