【javascript】全选按钮

2023-11-12

当点击全选按钮时,与之相关的所有选项都会被自动框选。

效果:

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <label><input type="checkbox" id="all">全选</label><br>
        <label><input type="checkbox" name="fruit">香蕉</label><br>
        <label><input type="checkbox" name="fruit">苹果</label><br>
        <label><input type="checkbox" name="fruit">梨子</label><br>
        <script>
            window.onload = function() {
                var all = document.getElementById("all");
                var fruit = document.getElementsByName("fruit");
                all.onchange = function(){
                    if(this.checked) {
                        for(var i=0;i<fruit.length;i++)
                            fruit[i].checked = true;
                    }
                    else {
                        for(var i=0;i<fruit.length;i++)
                            fruit[i].checked = false;
                    }
                }
            }
        </script>
    </body>
</html>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【javascript】全选按钮 的相关文章

随机推荐

  • Intellij IDEA 2019无法联网,无法下载插件问题解决办法

    Intellij IDEA 2019无法联网 无法下载插件问题解决办法 非法不多说直接上图 第一步 第二步 2019 2 之后没有这一步 第三步 记得重启哦 lt 完 gt
  • 代理服务器列表(20100116)

    经测试 今天发布的代理服务器全部都是免费可用的 211 152 11 30 80 69 119 28 234 8085 72 196 11 73 8085 222 66 116 110 8080 41 223 143 16 8080 122
  • 5.1劳动节,Happy May Day!(为什么要调休啊?)

    国际劳动节又称 五一国际劳动节 国际示威游行日 英语 International Workers Day May Day 是世界上80多个国家的全国性节日 定在每年的五月一日 它是全世界劳动人民共同拥有的节日 1889年7月 由恩格斯领导的
  • Unity中的宏定义

    有时候我们需要使用区分不同平台来实现不同的逻辑 这个时候就用到宏定义了 基本语法 if UNITY EDITOR WIN UNITY STANDALONE elif UNITY ANDROID else endif 宏定义可以直接写在类中
  • 基于STM32的正点原子LORA模块通信网络

    LoRa是semtech公司开发的一种低功耗局域网无线标准 其名称 LoRa 是远距离无线电 Long Range Radio 它最大特点就是在同样的功耗条件下比其他无线方式传播的距离更远 实现了低功耗和远距离的统一 它在同样的功耗下比传统
  • 解决“yarn : 无法加载文件 C:\Users\quber\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本”问题

    我们在使用yarn命令的时候 可能会出现如下图所示的错误 出现此错误的原因是本地计算机上运行你编写的未签名脚本和来自其他用户的签名脚本 可以使用如下命令将计算机上的执行策略更改为RemoteSigned 执行命令set ExecutionP
  • 6-3 逆序数据建立链表(20 分)_头插法建链表

    6 3 逆序数据建立链表 20 分 本题要求实现一个函数 按输入数据的逆序建立一个链表 函数接口定义 struct ListNode createlist 函数createlist利用scanf从输入中获取一系列正整数 当读到 1时表示输入
  • CMake常用命令(二) project命令

    文章目录 语法 作用 参数 举例 示例1 基础用法 示例2 VERSION用法 示例3 DESCRIPTION用法 示例4 HOMEPAGE URL用法 示例4 LANGUAGES用法 更多细节 参考 语法 project
  • 【Python库系列】超详细的NumPy入门

    目录 一 数组的创建 1 1 创建数组 1 2 数组的性质 二 数组的存载 2 1 numpy 自身的 npy 格式 2 2 文本 txt 格式 2 3 文本 csv 格式 三 数组的获取 3 1 正规索引 3 2 布尔索引 3 3 花式索
  • 多类隶属度的模糊支持向量机(FSVM)

    模糊支持向量机 FSVM 多类隶属度分析 1 传统FSVM 隶属度分析 2 改进的FSVM 隶属度分析 3 FSVM多类隶属度分析 4 评估分类效果 不定期遴选一些高质量期刊论文 进行介绍 内容不详加解释 重在学习文章的思路 模糊隶属度来描
  • EMC基础知识

    一 概述 传导实验为测试被测设备对外界的骚扰的强度的实验 测试的频谱为150K 30MHz 充分理解实验数据 对设计整改会起到关键性作用 以下对实验波形及数据 设计整改方向进行简要说明 二 测试频域图解读 以上2张波形 是测试中经常看到的2
  • 如何用vue实现文本的编辑

    文章数据是通过后台返回html数据 之后前端通过遍历生成一个大的html 然后渲染到页面上 我如果我想要给这个文章新添加一个编辑功能应该怎么实现 文章内容不便展示 只通过文字描述完成本功能 一般的话 编辑文本可以才用富文本编辑器或者采用wo
  • java 基础重学(二)-基础知识

    1 基本数据类型 2 自动拆装箱 3 String 4 关键字 5 集合类 6 枚举 7 IO 8 反射 9 动态代理 10 序列化 11 注解 12 JMS 13 JMX 14 泛型 15 单元测试 16 正则表达式 17 异常 18 时
  • 2021年最推荐的十大进销存管理软件排名

    2021年过去一半了 相信不少商家都要准备开始在忙着盘点自己库存 对账 整理数据报表 有的人选对了店铺管理软件 只需动动手指就能快速搞定自己需要的数据 然而有的人每天晚上加班加点计算盘点 到头来数据还是一团糟 只因为没有选对店铺管理软件或者
  • RabbitMQ第三个实操小案例——发布者/订阅者(Publish/Subscribe)、广播交换器(FanoutExchange)

    文章目录 RabbitMQ第三个实操小案例 发布者 订阅者 Publish Subscribe 广播交换器 FanoutExchange 写法一 配置类配置方式 写法二 注解方式 RabbitListener RabbitMQ第三个实操小案
  • 【蓝桥杯python】给定一个长度为n的数列,将这个数列按从小到大的顺序排列。1<=n<=200

    问题描述 给定一个长度为n的数列 将这个数列按从小到大的顺序排列 1 lt n lt 200 输入格式 第一行为一个整数n 第二行包含n个整数 为待排序的数 每个整数的绝对值小于10000 输出格式 输出一行 按从小到大的顺序输出排序后的数
  • Qt学习笔记(四):Qt 的内存回收机制

    在 Qt 中 QObject 是顶层对象 当 Qt 程序关闭的时候 QObject 对象会被自动释放掉 我们知道 C 中指针对象在使用的时候 需要手动分配空间 new 否则会出现 段错误 当指针对象不再使用的时候 需要手动释放空间 dele
  • C++药名整理题——教你首字符串升序排序

    某题库中 有这样一道题 题目名称 药名整理 医生在书写药品名的时候无法关注到格式问题 不注意大小写 格式比较混乱等现象时有发生 你能否写一个程序 将医生书写混乱的药品名整理成统一规范的格式 即药品名的第一个字符如果 是字母要大写 其他字母小
  • 【菜鸟教程笔记】beautifulsoup高级用法

    静觅的博客进行了很详细的讲解 博客网址为 https cuiqingcai com 1319 html 官方教学网页源码 p align center This is paragraph b one b p p align left Thi
  • 【javascript】全选按钮

    当点击全选按钮时 与之相关的所有选项都会被自动框选 效果 代码