基于JavaScript实现全选、不选和反选效果


Posted in Javascript onFebruary 15, 2017

利用javascript实现全选、不选和反选效果,这个不用多说,直接来代码,代码中自有注释帮你理解。

<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script>
      window.onload = function(){
        // 获取所有的按钮
        var btns = document.getElementsByTagName("button");
        // 获取所有的选项input
        var inputs = document.getElementsByTagName("input");

        // 全选或者不选的时候 调用此函数
        function fun(flag){
          for (var i=0; i<inputs.length;i++) {
            inputs[i].checked = flag;
          }
        }

        //获取第一个按钮 “全选”
        btns[0].onclick = function(){
          fun(true);
        }

        // 获取第二个按钮 "不选"
        btns[1].onclick = function(){
          fun(false);
        }
        // 获取第三个按钮 “反选”
        btns[2].onclick = function(){
          // 遍历所有的选项,判断每一个选项是否被选中
          for (var i=0;i<inputs.length;i++) {
            inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true;
          }
        }

      }
    </script>
  </head>
  <body>
    <div id="box1">
      <button>全选</button>
      <button>不选</button>
      <button>反选</button>
    </div>
    <div id="box2">
      <ul>
        <li>选项1:<input type="checkbox"></li>
        <li>选项2:<input type="checkbox"></li>
        <li>选项3:<input type="checkbox"></li>
        <li>选项4:<input type="checkbox"></li>
        <li>选项5:<input type="checkbox"></li>
        <li>选项6:<input type="checkbox"></li>
        <li>选项7:<input type="checkbox"></li>
        <li>选项8:<input type="checkbox"></li>
        <li>选项9:<input type="checkbox"></li>

      </ul>
    </div>

  </body>
</html>

效果展示:

基于JavaScript实现全选、不选和反选效果

其他实现效果,自行查看!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
jquery常用的12个小功能
Jul 22 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
vue实现多级菜单效果
Oct 19 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 #Javascript
bootstrap中添加额外的图标实例代码
Feb 15 #Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 #Javascript
js实现模糊匹配功能
Feb 15 #Javascript
js 性能优化之算法和流程控制
Feb 15 #Javascript
微信小程序 常用工具类详解及实例
Feb 15 #Javascript
微信小程序 基础知识css样式media标签
Feb 15 #Javascript
You might like
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
php获取远程文件大小
2015/10/20 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
js函数排序的实例代码
2013/07/01 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
python实现多线程抓取知乎用户
2016/12/12 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
《囚绿记》教学反思
2014/03/01 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
解决Python字典查找报Keyerror的问题
2021/05/26 Python
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python