点击事件——全选取消反选按钮——JavaScript——for循环

wind-hm

已于 2022-03-22 22:25:13 修改

阅读量1.5k

点赞数

分类专栏：小案例文章标签： javascript html css

于 2022-03-22 22:11:57 首次发布

本文链接：https://blog.csdn.net/A_home/article/details/123673161

版权

本文介绍了使用JavaScript实现全选、取消和反选功能的方法。通过给全选按钮绑定事件，当点击全选按钮时，将全选状态同步到4个子复选框。同时，为每个子复选框设置点击事件，每次点击都会循环检查所有复选框是否都被选中，以更新全选按钮的状态。

摘要由CSDN通过智能技术生成

思路：

1、全选和单选分为两部分来看待

2、给全选按钮绑定事件，点击全选按钮就将自身的checked状态赋值给下面的4个小按钮

3、下面4个复选框全选中，全选才能被选中：给每个按钮绑定事件，每次点击下面的复选框都要循环检查下面的4个小按钮是否被选中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @font-face {
        font-family: tenxunti;
        src: url(webfonts/腾讯体.ttf);
      }
      table {
        font-family: tenxunti;
        font-size: 50px;
        border-collapse: collapse;
      }
      thead {
        background-color