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 组件之旅(一)分析和设计
Oct 28 Javascript
JS 对象介绍
Jan 20 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
layui 阻止图片上传的实例(before方法)
Sep 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创建动态图像
2006/10/09 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
PHP中使用curl入门教程
2015/07/02 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
vue中组件的3种使用方式详解
2019/03/23 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python文件的读写和异常代码示例
2017/10/31 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
Python秒算24点实现及原理详解
2019/07/29 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
python——全排列数的生成方式
2020/02/26 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
采购员岗位职责
2013/11/15 职场文书
化学专业毕业生自荐信
2013/11/15 职场文书