表单全选反选(前端)

 1.Html和JavaScript

<table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>¥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>苹果手机</td>
      <td>苹果</td>
      <td>¥6999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>华为手机</td>
      <td>华为</td>
      <td>¥6999</td>
    </tr>
  </table>

  <script>

      //1.获取大复选框
      const checkAll = document.querySelector('#checkAll')

      //2.获取所有的小复选框
      const cks = document.querySelectorAll('.ck')

      //3.点击大复选框 注册事件
      checkAll.addEventListener('click',function(){
        // console.log(this.checkAll);

        //4.遍历所有的小复选框,让小复选框的checked = 大复选框的checked
        for(let i = 0;i < cks.length;i++){
          // cks[i].checked = checkAll.checked
          cks[i].checked = this.checked
        }

        //5.小复选框控制大复选框
        for(let i = 0; i< cks.length;i++){
          //5.1给所有的小复选框添加点击事件
          cks[i].addEventListener('click',function(){
            //判断选中的小复选框个数 是不是等于 总的小复选框个数
            //等于3就全选
            checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
          })
        }
      })
  </script>

2.CSS样式

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 900px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }
  </style>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/506639.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Hive函数笔试题(简单)

第1题 有如下的用户访问数据 userId visitDate visitCount u01 2017/1/21 5 u02 2017/1/23 6 u03 2017/1/22 8 u04 2017/1/20 3 u01 2017/1/23 6 u01 2017/2/21 8 u02 2017/1/23 6 u01 2017/2/22 4 要求使用SQL统计出每个用户的累积访问次数&…

Qt中继承QCheckBox的类结合QTableWidget实现多选并且每个多选的id都不一样

1.相关描述 继承QCheckBox的类MyCheckBox&#xff0c;利用QTableWidget的setCellWidget方式添加MyCheckBox类的对象 2.相关页面 3.相关代码 mycheckbox.h #ifndef MYCHECKBOX_H #define MYCHECKBOX_H#include <QCheckBox> #include <QObject>class MyCheckBox : pu…

DSSS-UQPSK学习笔记

文章目录 非平衡四相键控-直接序列扩频&#xff08;UQPSK-DSSS&#xff09;信号因其能同时传输两路不同功率、不同速率信号的特点&#xff0c;在需要图象和数据综合业务传输的领域得到了广泛应用。 系统信号的调制方式为非平衡四相键控&#xff08;Unbalanced Quadrature Phase…

SpringBoot 整合Redis第1篇

SpringBoot是一个开发框架&#xff0c;Redis是一个高性能的键值存储数据库&#xff0c; 常用于缓存、会话管理、消息队列等应用场景。 定义 Redis是什么&#xff1f; 它是一个存储层级&#xff0c; 在实际项目中&#xff0c;位于关系数据库之上&#xff0c; 类似Android分为5…

vue3封装Element导航菜单

1. 导航外层布局 AsideView.vue <template><el-menu:default-active"defaultActive"class"my-menu":collapse"isCollapse":collapse-transition"false"open"handleOpen"close"handleClose"><menu…

【机器学习入门】拥抱人工智能,从机器学习开始

拥抱人工智能&#xff0c;从机器学习开始 目录&#xff1a; 1. 机器学习&#xff1a;一种实现人工智能的方法2. 机器学习算法&#xff1a;是使计算机具有智能的关键3. Anaconda&#xff1a;初学Python、入门机器学习的首选4. 总结 转载链接&#xff1a;文章-阿里云开发者社区…

PyTorch深度学习入门-1

PyTorch深度学习快速入门教程&#xff08;绝对通俗易懂&#xff01;&#xff09;【小土堆】_哔哩哔哩_bilibili \ PyTorch 和 TensorFlow 是两个深度学习框架&#xff0c;TensorBoard 是 TensorFlow 提供的可视化工具&#xff0c;Transforms是 PyTorch 中用于数据预处理的工具…

可视化图表:K线图,快速搞清价格波动。

2023-08-21 21:20贝格前端工场 Hi&#xff0c;我是贝格前端工场的老司机&#xff0c;本文分享可视化图表设计的K线图设计&#xff0c;欢迎老铁持续关注我们。 一、K线图的含义 K线图&#xff08;K Line Chart&#xff09;是一种常用于股票、期货等金融市场的可视化图表&…

如何将图片识别转文字?这3种工具简单易操作

如何将图片识别转文字&#xff1f;在数字化时代&#xff0c;图片识别转文字技术的需求愈发凸显。无论是处理海量的扫描文档&#xff0c;从中迅速提取关键信息&#xff0c;还是通过照片轻松记录菜单上的文字&#xff0c;这一技术都展现出了其强大的实用性。它极大地提高了我们的…

计算机网络—VLAN 间路由配置

目录 1.拓扑图 2.实验环境准备 3.为 R3 配置 IP 地址 4.创建 VLAN 5.配置 R2 上的子接口实现 VLAN 间路由 6.配置文件 1.拓扑图 2.实验环境准备 配置R1、R3和S1的设备名称&#xff0c;并按照拓扑图配置R1的G0/0/1接口的IP地址。 [Huawei]sysname R1 [R1]interface Giga…

机器视觉/将HIK海康面阵相机连接Halcon软件

文章目录 概述工业相机客户端动态库拷贝Halcon连接HIK相机的配置相机参数其他 概述 本文简述了如何将海康面阵相机连接到Halcon软件中进行实时取图的过程。 补充&#xff0c; 整个实践过程使用 17.12 / x64-win64 Halcon 软件版本 海康 MV-CE200-10GM 面阵相机。从左到右简解…

机器学习周报第35期

目录 一、文献阅读&#xff1a;You Only Look Once: Unified, Real-Time Object Detection1.1 摘要1.2 背景1.3 论文模型1.4 网络设计1.5 YOLO的局限性1.6 实现代码 target 7*7*30 值域为0-1 一、文献阅读&#xff1a;You Only Look Once: Unified, Real-Time Object Detection…

C/C++ 之 GSL 数学运算库使用笔记

Part.I Introduction 本文主要记录一下笔者使用 GSL 过程当中所做的一些笔记。 Chap.I 传送门 一些传送门 GSL源码&#xff08;CMakeList 版本-Windows&#xff09;GSL源码&#xff08;configure 版本-Linux&#xff09;GSL 在线文档GSL 文档下载 Chap.II GSL 简介 GSL 全…

【Java EE】多线程(一)

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更…

Python爬虫验证码识别——手机验证码的自动化处理

手机验证码的自动化处理 有一种验证码就是手机验证码&#xff0c;如果在PC上出现了一个手机验证码&#xff0c;需要先在PC上输入手机号&#xff0c;然后把短信验证码发到手机上&#xff0c;再在PC上输入收到的验证码&#xff0c;才能通过验证。 遇到这样的情况&#xff0c;如…

【Linux在程序运行时打印调用栈信息(函数名,文件行号等)】

在程序运行时打印相关调用栈信息&#xff08;函数名&#xff0c;文件行号等&#xff09;,便于梳理调用逻辑等 //stack.c #include <stdio.h> #include <execinfo.h> #include <stdlib.h> #include <string.h> #include <stdbool.h>#define MAX_…

vue cesium heatmap 热力图

实现效果 引入 heatmap index.html 中引入 heatmap <script src"./heatmap.min.js"></script>使用 <script lang"ts" setup> import * as Cesium from cesium import cesium/Build/Cesium/Widgets/widgets.cssdefineOptions({ name: …

MySQL count函数的使用

count&#xff08;&#xff09;函数在使用时参数好像不能设置为表达式&#xff0c;只能设置成指定字段或* 比如在查询性别为男的成员数目时不能写&#xff1a; select count(gendermale) from user_profile ; 否则直接得到6&#xff0c;也就是等价于select count(gender) fro…

Docker镜像的(Dive)分析和(Grype)漏洞扫描

Dive dive能够分析docker镜像分层内容以及发现缩小docker/OCI镜像大小的方法。 提高部署效率&#xff1a;能够秒级快速启动一个应用&#xff0c;而传统的方式分钟级别以上&#xff1b; 提高运行效率&#xff1a;相对物理机和虚拟化&#xff0c;容器具有更高的资源利用率&…

【经典算法】LeetCode 21:合并两个有序链表Java/C/Python3实现含注释说明,Easy)

合并两个有序链表 题目描述思路及实现方式一&#xff1a;迭代&#xff08;推荐&#xff09;思路代码实现Java版本C语言版本Python3版本 复杂度分析 方式二&#xff1a;递归&#xff08;不推荐&#xff09;思路代码实现Java版本C语言版本Python3版本 复杂度分析 总结相似题目 标…