编程 Javascript

基于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实现全选、不选和反选效果

- Author -

diligentkong

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 动态修改css文件的方法

Aug 05 Javascript

jquery ui bootstrap 实现自定义风格

Nov 14 Javascript

javascript中String对象的slice()方法分析

Dec 20 Javascript

javascript中的Base64、UTF8编码与解码详解

Mar 18 Javascript

Angular组件化管理实现方法分析

Mar 17 Javascript

bootstrap suggest搜索建议插件使用详解

Mar 25 Javascript

Angular 1.x个人使用的经验小结

Jul 19 Javascript

jQuery条件分页代替离线查询（附代码）

Aug 17 jQuery

vue 组件全局注册和局部注册的实现

Feb 28 Javascript

JS实现滑动导航效果

Jan 14 Javascript

JS关闭子窗口并且刷新上一个窗口的实现示例

Mar 10 Javascript

js实现百度登录窗口拖拽效果

Mar 19 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