脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js复选框全选和取消全选

JavaScript实现复选框全选和取消全选

 更新时间：2020年11月20日 15:07:04   作者：我是Dreamer啊  
这篇文章主要为大家详细介绍了JavaScript实现复选框全选和取消全选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

JS网页–全选和取消全选，供大家参考，具体内容如下

表格，初始状态下复选框都是未选中状态，选中表头的复选框后，下面几个复选框变为选中状态，取消表头复选框选中状态后，下面几个复选框选中状态也随之取消；下面的几个复选框同时选中时，表头的复选框也随之选中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全选和取消全选</title>
  <style>
    table {
      width: 200px;
      border-collapse: collapse;
      margin: 100px auto;
    }
    table thead {
      font-size: 16px;

      background-color: skyblue;
    }
    table th {
      border: 1px solid black;
    }
    table td {
      border: 1px solid black;
      font-size: 14px;
      
    }

  </style>
</head>
<body>
  <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>手机1</td>
        <td>5000</td>
      </tr>
      <tr>
        <td><input type="checkbox" ></td>
        <td>手机2</td>
        <td>6000</td>
      </tr>
      <tr>
        <td><input type="checkbox" ></td>
        <td>手机3</td>
        <td>7000</td>
      </tr>
    </tbody>
  </table>
  <script>
    //选择全选 下面复选框设置为checked；
    var j_cbAll = document.getElementById('j_cbAll');
    var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
    j_cbAll.onclick = function(){
      console.log(this.checked);
      for (var i =0 ;i < j_tbs.length;i++){
        j_tbs[i].checked = this.checked; 
      }
    }
    //下面复选框均为checked 全选复选框为checked；
    for(var j = 0;j < j_tbs.length; j++){
      j_tbs[j].onclick = function(){
        var flag =true;
        for(var i=0;i<j_tbs.length;i++){
          if(!j_tbs[i].checked){
            flag=false;
            break;
          }
        }
        j_cbAll.checked = flag;
      }

    }
      
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript 预解析的4种实现方法解析

    JavaScript 预解析的4种实现方法解析

    这篇文章主要介绍了JavaScript 预解析的4种实现方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 数组Array的一些方法(总结)

    数组Array的一些方法(总结)

    下面小编就为大家带来一篇数组Array的一些方法(总结)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JSON简介以及用法汇总

    JSON简介以及用法汇总

    JSON（JavaScript Object Notation）即JavaScript对象表示法，是一种轻量级的数据交换格式。它非常便于编程人员对数据的处理，也便于机器对数据的解析和生成，应用非常广泛
    2016-02-02
  • uniapp高频面试题及答案合集

    uniapp高频面试题及答案合集

    uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到IOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台,下面这篇文章主要给大家介绍了关于uniapp高频面试题及答案的相关资料,需要的朋友可以参考下
    2023-02-02
  • 分享JavaScript与Java中MD5使用两个例子

    分享JavaScript与Java中MD5使用两个例子

    这篇文章主要为大家分享了JavaScript与Java中MD5使用两个例子，
    2015-12-12
  • 基于Three.js实现3D玉兔效果的示例代码

    基于Three.js实现3D玉兔效果的示例代码

    2022年中秋佳节即将来临，中秋节是我们国家的传统节日。而中秋与玉兔又往往会联系在一起，本文将用Threejs做一只会动的3D玉兔，感兴趣的可以了解一下
    2022-08-08
  • js隐式全局变量造成的bug示例代码

    js隐式全局变量造成的bug示例代码

    一段js代码遇到一个bug，由于中间的隐式全局变量造成的，通过谷歌浏览器的js调试器才找到问题所在，下面将代码与大家分享下
    2014-04-04
  • 必备的JS调试技巧汇总

    必备的JS调试技巧汇总

    试想一下：出现了某个bug，有人用几分钟就搞定了，有人用了半天或者一天都找不到原因所在。你愿意当前者还是后者呢？想当前者的就请好好看完本篇文章吧。文中涉及较多Gif演示动画请注意。
    2016-07-07
  • js实现模拟计算器退格键删除文字效果的方法

    js实现模拟计算器退格键删除文字效果的方法

    这篇文章主要介绍了js实现模拟计算器退格键删除文字效果的方法,涉及javascript字符串截取操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • js实现滑动滑块验证登录

    js实现滑动滑块验证登录

    这篇文章主要为大家详细介绍了js实现滑动滑块验证登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07

最新评论