js全选反选

画蛇添足
• 阅读 514
<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<body>
  <input type="checkbox" name="game" id="all">全选/反选
  <input type="checkbox" name="game" id="csgo" class="item">csgo
  <input type="checkbox" name="game" id="dota" class="item">dota
  <input type="checkbox" name="game" id="lol" class="item">lol

  <script>
    // 获取全选反选元素
    var all = document.querySelector('#all')
    // 获取所有单独项元素
    var item = document.querySelectorAll('.item')
    // 给全选反选绑定点击事件
    all.onclick = function () {
      // 遍历所有单独项,全选反选被点击后把值赋值给所有单独项实现全选反选
      for(var i = 0; i < item.length; i++) {
        item[i].checked = all.checked
      }
    }

    // 遍历每一个单独项,为每个单独项绑定点击事件
    for(var i = 0; i < item.length; i++) {
      item[i].onclick = function () {
        // 设置统计变量
        var count = 0
        // 遍历每一个单独项,如果有其中一个被选中,统计变量加1
        for(var j = 0; j < item.length; j++) {
          if (item[j].checked) {
            count++
          }
        }
        // 根据选中数量决定是否全选
        if (count === item.length) {
          all.checked = true
        }else {
          all.checked = false
        }
      }
    }
  </script>
</body>
</html>
点赞
收藏
评论区
推荐文章
待兔 待兔
11个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
ASMSupport教程4.7 生成关系运算符
<p在java中,关系运算符是很常用的,分别是&gt;,,&lt;,&gt;,&lt;,!这六种,我们按照惯例看看我们需要生成的代码:</p<divid"scid:9D7513F9C04C4721824A2B34F0212519:dfec0f1ca2ec4ebabc9b91c161fbfa47"class"wlWri
Stella981 Stella981
3年前
SpringBoot 2.0 系列002
SpringBoot2.0系列002运行流程分析SpringBoot2.0系列001入门介绍以及相关概念(https://my.oschina.net/lt0314/blog/1810336)1\.SpringBoot运行的几种方式
Wesley13 Wesley13
3年前
4,MongoDB 之 $关键字 及 $修改器 $set $inc $push $pull $pop MongoDB
MongoDB中的关键字有很多,$lt$gt$lte$gte等等,这么多我们也不方便记,这里我们说说几个比较常见的一.查询中常见的等于大于小于大于等于小于等于等于:在MongoDB中什么字段等于什么值其实就是":"来搞定比如"name":"路飞学城"!(https://oscimg.oschin
Stella981 Stella981
3年前
PythonStudy——魔法函数 Magic Methods
魔法函数python中以双下划线开始和结束的函数(不可自己定义)为魔法函数调用类实例化的对象的方法时自动调用魔法函数(感觉不需要显示调用的函数都叫)在自己定义的类中,可以实现之前的内置函数,比如下面比较元素sorted时用It函数(lt(self,other):判断self对象是否小于other对象;)
Stella981 Stella981
3年前
Python 的 Magic Methods 指南
_摘要:_ 介绍本指南是数月博客的总结。主题是魔术方法。什么是魔术方法呢?它们是面向对象Python语言中的一切。它们是你可以自定义并添加“魔法”到类中的特殊方法。它们被双下划线环绕(比如\_\_init\_\_或\_\_lt\_\_)。介绍本指南是数月博客的总结。主题是魔术方法。什么是魔术方法呢?它们是面向对象Python语言中的一
Wesley13 Wesley13
3年前
MongoDB 范围查询
查询价格在2009000  $gt 大于   $lt  小于//查询价格2009000范围的数据db.prodgory.find({"price":{$gt:"200",$lt:"9000"}})查询给定范围数据  $in//给定范围查询db.product1.find({"categor
小万哥 小万哥
1年前
资源描述框架的用途及实际应用解析
RDF(资源描述框架)是一种用于机器理解网络资源的框架,使用XML编写。它通过URI标识资源,用属性描述资源,便于计算机应用程序处理信息。RDF在语义网上促进信息的确切含义和自动处理,使得网络信息可被整合。RDF语句由资源、属性和属性值组成。RDF文档包括&lt;rdf:RDF&gt;根元素和&lt;rdf:Description&gt;元素,后者用about属性标识资源。RDF还支持容器(如&lt;Bag&gt;、&lt;Seq&gt;和&lt;Alt&gt;)来描述集合。RDFS是RDF的扩展,提供描述类和属性的框架,而达布林核心是一组预定义属性,用于描述文档。
小万哥 小万哥
12个月前
RSS 解析:全球内容分发的利器及使用技巧
RSS(ReallySimpleSyndication)是一种XML格式,用于网站内容的聚合和分发,让用户能快速浏览和跟踪更新。RSS文档结构包括&lt;channel&gt;和&lt;item&gt;元素,允许内容创作者分享标题、链接和描述。通过RSS,用户可以定制新闻源,过滤不相关信息,提高效率。RSS支持不同版本,如RSS0.91和RSS2.0,其中RSS2.0语法简单且广泛使用。RSS提高网站流量,适用于新闻、博客、日历等频繁更新的站点。RSS的历史始于1997年,至今仍无官方标准,但已成为内容共享的重要工具。
画蛇添足
画蛇添足
Lv1
遥想江口依然,鸟啼花谢,今日谁为主。
文章
3
粉丝
0
获赞
0