原生js全选反选实现

最新推荐文章于 2022-03-01 11:15:38 发布

兔子零-A酱

最新推荐文章于 2022-03-01 11:15:38 发布

阅读量152

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_43764814/article/details/113081595

版权

javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全选反选</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>
<body>
  <div class="wrap">
      <table>
          <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll" />
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
          </thead>
          <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>

          </tbody>
      </table>
      <input type="button" value="  反 选  " id="btn">
  </div>
<script>
   
    var allCk=document.getElementById('j_cbAll');
    var tbody=document.getElementById('j_tb');
    var inputs=tbody.getElementsByTagName('input');
    var btn =document.getElementById('btn');
     //全选. 取消全选
     allCk.onclick=function(){
         for(var i = 0 ; i< inputs.length;i++){
             if(inputs[i].type==='checkbox'){
                inputs[i].checked=this.checked;
             }
            
         }
     }
    //反选
    btn.onclick=function(){
        for(var i =0 ; i < inputs.length;i++){
            if(inputs[i].type==='checkbox'){
            inputs[i].checked=!inputs[i].checked;
            }
        }
        isAllcheck();
    }
    //点击多选框 判断
    for(var i= 0 ; i< inputs.length;i++){
        inputs[i].onclick=isAllcheck;
    }

    function isAllcheck(){
        var flag=true;
        for(var i =0; i<inputs.length;i++){
            if(inputs[i].checked===false){
                flag=false;
            }
            
        }
        allCk.checked=flag;
    }
</script>
    
</body>
</html>

兔子零-A酱

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>全选.
复制链接

扫一扫

专栏目录