当前位置: 首页 > news >正文

DOM编程-全选、全不选和反选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>全选、全不选和反选</title>
    </head>
    <body bgcolor="antiquewhite">
        <script type="text/javascript">
            window.onload = function(){
                //获取所有的爱好
                var aiHaos = document.getElementsByName("aiHao");
                //给全选按钮绑定鼠标单击事件
                document.getElementById("111").onclick = function(){
                    for(var i = 0;i < aiHaos.length;i++){
                        aiHaos[i].checked = true;
                    }
                }
                //给全不选按钮绑定鼠标点击事件
                document.getElementById("222").onclick = function(){
                    for(var i = 0;i < aiHaos.length;i++){
                        aiHaos[i].checked = false;
                    }
                }
                //给反选按钮绑定鼠标点击事件
                document.getElementById("333").onclick = function(){
                    for(var i = 0;i < aiHaos.length;i++){
                        //将当前复选框checked属性的相反值赋值给当前checked属性
                        aiHaos[i].checked = !(aiHaos[i].checked);
                    }
                }
            }
        </script>
        兴趣爱好:
                <input type="checkbox" name="aiHao" value="js" checked="checked"/>javaScript
                <input type="checkbox" name="aiHao" value="java"/>java
                <input type="checkbox" name="aiHao" value="json"/>json
                <input type="checkbox" name="aiHao" value="html"/>html
                <input type="checkbox" name="aiHao" value="css"/>css<br/>
                <input type="button" id="111" value="全都选">
                <input type="button" id="222" value="全不选">
                <input type="button" id="333" value="反向选"><br/>
    </body>
</html>

http://www.lryc.cn/news/4750.html

相关文章:

  • C++11可变模板参数
  • Linux多线程
  • Webpack5 环境下 Openlayers 标注(Icon) require 引入图片问题
  • Zookeeper安装部署
  • Cow Acrobats ( 临项交换贪心 )
  • MySQL:为什么说应该优先选择普通索引,尽量避免使用唯一索引
  • Spring Cloud alibaba之Feign
  • 零信任-Google谷歌零信任介绍(3)
  • Numpy基础——人工智能基础
  • 电商仓储与配送云仓是什么?
  • 【零基础入门前端系列】—HTML介绍(一)
  • Elasticsearch索引库和文档的相关操作
  • 使用Python,Opencv检测图像,视频中的猫
  • 浅谈域名和服务器集约化管理的误区
  • 迪赛智慧数——柱状图(正负条形图):20212022人才求职最关注的因素
  • 网络安全-黑帽白帽红客与网络安全法
  • Xpath元素定位之同级节点,父节点,子节点
  • 华为OD机试 - 挑选字符串(Python)| 真题+思路+代码
  • python笔记-- “__del__”析构方法
  • 支付系统核心架构设计思路(万能通用)
  • python实现mongdb的双活
  • LeetCode-110. 平衡二叉树
  • Python蓝桥杯训练:基本数据结构 [链表]
  • 华为OD机试 - 找字符(Python)| 真题+思路+代码
  • 使用继承与派生的6大要点
  • 加一-力扣66-java高效方案
  • 记一次 .NET 某游戏网站 CPU爆高分析
  • 集群使用——资源管理和租户创建
  • 谷歌浏览器登录失败,提示【无法同步到“...@gmail.com”】
  • 75 111111