Javascript设置表格全选，反选，全不选属性

最新推荐文章于 2022-08-23 17:23:43 发布

Bo~Sir

最新推荐文章于 2022-08-23 17:23:43 发布

阅读量247

点赞数

分类专栏：前端文章标签： js javascript html5 dom css

本文链接：https://blog.csdn.net/bo_sir/article/details/115673909

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Javascript设置表格全选，反选，全不选属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .tb1{
        width: 500px;
        height: 300px;
        border: 1px solid;
        text-align: center;

    }
    td,th{
        border:1px solid;
    }
</style>
<script type="text/javascript">
    window.onload=function (){
        //全选
         document.getElementById("selectAll").onclick=
             function () {
                 //1.获取所有的Dom对象
                 var cbs = document.getElementsByName("cb");
                 //2.将所有的checked值设置为true
                 for (let i = 0; i < cbs.length; i++) {
                     cbs[i].checked = true;
                 }
             }
             //反选
        document.getElementById("selectRev").onclick=
            function () {
                //1.获取所有的Dom对象
                var cbs = document.getElementsByName("cb");
                //2.将所有的checked值设置为true
                for (let i = 0; i < cbs.length; i++) {
                  if( cbs[i].checked == true){
                      cbs[i].checked =false;
                  }
                  else {cbs[i].checked = true;}
                }
            }
            //全不选
        document.getElementById("unSelect").onclick=
            function () {
                //1.获取所有的Dom对象
                var cbs = document.getElementsByName("cb");
                //2.将所有的checked值设置为true
                for (let i = 0; i < cbs.length; i++) {
                    cbs[i].checked = false;
                }
            }
    }
</script>
<body>
<table class="tb1">
    <caption>学生信息表</caption>
    <tr><th>操作</th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>001</td>
        <td>张三</td>
        <td>男</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>002</td>
        <td>张2</td>
        <td>男</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>003</td>
        <td>张三</td>
        <td>男</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>004</td>
        <td>张三</td>
        <td>男</td>
    </tr>
</table>
<input type="button" value="全选" id="selectAll">
<input type="button" value="反选" id="selectRev">
<input type="button" value="全不选" id="unSelect">
</body>
</html>

重点：
1 》》使用页面加载后的函数 window.οnlοad=function ()
2 》》获取ID:
document.getElementById(“selectAll”).onclick
3》》function () {
//1.获取所有的Dom对象
var cbs = document.getElementsByName(“cb”);
//2.将所有的checked值设置为true
for (let i = 0; i < cbs.length; i++) {
if( cbs[i].checked == true){
cbs[i].checked =false;
}
else {cbs[i].checked = true;}