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 相关文章推荐
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 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
xml在joomla表单中的应用详解分享
2012/07/19 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
完美的php分页类
2017/10/24 PHP
Javascript学习指南
2014/12/01 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python中join和split用法实例
2015/04/14 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
python装饰器深入学习
2018/04/06 Python
Django 连接sql server数据库的方法
2018/06/30 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
预备党员党课思想汇报
2014/01/13 职场文书
党员学习十八大感想
2014/01/17 职场文书
销售简历自我评价
2014/01/24 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
党章学习心得体会2016
2016/01/14 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android