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


Posted in Javascript onNovember 20, 2020

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

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

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

<!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 相关文章推荐
js简单抽奖代码
Jan 16 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
AngularJS Module方法详解
Dec 08 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
小程序实现列表删除功能
Oct 30 Javascript
js实现ajax的用户简单登入功能
Jun 18 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
JavaScript实现网页下拉菜单效果
Nov 20 #Javascript
JavaScript实现网页tab栏效果制作
Nov 20 #Javascript
原生js实现弹窗消息动画
Nov 20 #Javascript
js实现限定区域范围拖拉拽效果
Nov 20 #Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
详解vue 组件注册
Nov 20 #Vue.js
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 #Javascript
You might like
10条PHP高级技巧[修正版]
2011/08/02 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
QQ登录简单实现代码
2021/03/09 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
python开发之文件操作用法实例
2015/11/13 Python
Python中django学习心得
2017/12/06 Python
python之文件读取一行一行的方法
2018/07/12 Python
python实现五子棋小游戏
2020/03/25 Python
深入了解Django中间件及其方法
2019/07/26 Python
Python如何安装第三方模块
2020/05/28 Python
Flask处理Web表单的实现方法
2021/01/31 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
银行授权委托书范本
2014/10/04 职场文书
刑事撤诉申请书
2015/05/18 职场文书
就业推荐表院系意见
2015/06/05 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
工商局调档介绍信
2015/10/22 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
Python pandas求方差和标准差的方法实例
2021/08/04 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS