基于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 相关文章推荐
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
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 session机制
2011/07/17 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
php生成圆角图片的方法
2015/04/07 PHP
php 类自动载入的方法
2015/06/03 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
Python字典操作简明总结
2015/04/13 Python
查看django版本的方法分享
2018/05/14 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
解析Python3中的Import
2019/10/13 Python
婚礼新郎父母答谢词
2014/01/16 职场文书
运动会广播稿80字
2014/01/23 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
公民授权委托书
2014/10/15 职场文书
安全先进个人材料
2014/12/29 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript