JavaScript实现Checkbox全选和反选功能

最新推荐文章于 2023-06-27 21:22:39 发布

云自足下来

最新推荐文章于 2023-06-27 21:22:39 发布

阅读量981

点赞数 2

分类专栏： Api - 页面元素文章标签： javascript

Api - 页面元素专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript实现Checkbox全选和反选功能

实现全选反选功能

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <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 j_cbAll = document.getElementById('j_cbAll');
      var j_tb = document.getElementById('j_tb')
      var inputs = j_tb.getElementsByTagName('input');

      // 选择全选,全部选中
      j_cbAll.onclick = function(){
        // 遍历inputs获取每个Checkbox
        for (var i = 0; i < inputs.length; i++){
          inputs[i].checked = j_cbAll.checked ;
        }
      }

     // 只要有一项没有被选中,全选就不被选中,全部被选中则全选也被选中
     // 外循环遍历每个checkbox加入一个onclick事件
      for (var i = 0; i < inputs.length; i++){  
        inputs[i].onclick = function(){
          var isOk = true;  // 假设全被选中了
          // 判断4个checkbox的checked,如果有一个没选中(false),那么isOk就为false
          for (var i = 0; i < inputs.length; i++){
            if (inputs[i].checked == false){
              isOk = false; 
            }
          }
          j_cbAll.checked = isOk; 
        }
      }

      // 反选的功能      
      var btn = document.getElementById('btn');
      btn.onclick = function(){
        // 触发事件后,被选中的改为未选中,未选中的改为选中
        for (var i = 0; i < inputs.length; i++){
          inputs[i].checked = !inputs[i].checked;
        }
        // 下面代码实现选中所有tbody里的checkbox时,当点击反选按钮时,thead里的全选按钮也会被改为未选中
        var isOk = true;  // 假设全被选中了
        // 判断4个checkbox的checked,如果有一个没选中(false),那么isOk就为false
        for (var i = 0; i < inputs.length; i++){
          if (inputs[i].checked == false){
            isOk = false; 
          }
          j_cbAll.checked = isOk; 
        }
      }
  </script>
</body>
</html>

云自足下来

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现Checkbox全选和反选功能

JavaScript实现Checkbox全选和反选功能&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *
复制链接

扫一扫