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 qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
关于vue面试题汇总
Mar 20 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
JS简易计算器实例讲解
Jun 30 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 header函数使用教程
2013/09/05 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php中yii框架实例用法
2020/12/22 PHP
JavaScript事件列表解说
2006/12/22 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
Angular脚手架开发的实现步骤
2019/04/09 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
python3实现暴力穷举博客园密码
2016/06/19 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python 互换字典的键值对实例
2019/02/12 Python
Django 拆分model和view的实现方法
2019/08/16 Python
Python reques接口测试框架实现代码
2020/07/28 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
接口可以包含哪些成员
2012/09/30 面试题
介绍下static、final、abstract区别
2015/01/30 面试题
酒店服务与管理毕业生求职信
2013/11/02 职场文书
大学生四年生活自我鉴定
2013/11/21 职场文书
运动会广播稿50字
2014/01/26 职场文书
信息管理应届生求职信
2014/03/07 职场文书
学校师德承诺书
2014/05/23 职场文书
节水标语大全
2014/06/11 职场文书
应用外语系自荐信
2014/06/26 职场文书
个人安全生产责任书
2014/07/28 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
趣味运动会广播稿
2014/09/13 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL