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 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
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
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
python实现两个文件合并功能
2018/04/01 Python
python实现简单登陆流程的方法
2018/04/22 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
关于Python作用域自学总结
2019/06/10 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
RealTek面试题
2016/06/28 面试题
摄影实习自我鉴定
2013/09/20 职场文书
行政助理求职自荐信
2013/10/26 职场文书
门卫岗位安全职责
2013/12/13 职场文书
学校办公室主任职责
2013/12/27 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
python中Matplotlib绘制直线的实例代码
2021/07/04 Python
Java对文件的读写操作方法
2022/04/29 Java/Android