JS实现全选、反选、不选

效果图：

代码如下，复制即可使用：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript">

       window.onload = function(){//全局加载

           var oi = document.getElementById("oi");//全选按钮获取节点

           var po = document.getElementById("po");//单选按钮获取节点

           var yu = document.getElementById("yu");//反选按钮获取节点

           var inp = document.getElementsByTagName("input");

           oi.onclick = function(){//全选按钮加载点击事件

               for(var i = 0;i < inp.length;i++){//全选按钮循环  小于按钮和的全选中 按钮个数和为i

                   inp[i].checked = true;//按纽的属性值小于按钮个数是=（真）true

               }

           }

          po.onclick = function(){

               for(var i = 0;i < inp.length;i++){

                   inp[i].checked = false;

               }

           }

          yu.onclick = function(){

                  for(var i= 0;i < inp.length;i++){

                     if( inp[i].checked == true){

                         inp[i].checked = false;

                     }else {

                         inp[i].checked = true;

                     }

                  }

              }

       }

    </script>

</head>

<body>

    <input type="checkbox" value="足球" name="1" /><br/>

    <input type="checkbox" value="足球" name="2" /><br/>

    <input type="checkbox" value="足球" name="3" /><br/>

    <input type="checkbox" value="足球" name="4"/><br/>

    <input type="checkbox" value="足球" name="5" /><br/>

    <input type="checkbox" value="足球" name="6" /><br/>

    <input type="checkbox" value="足球" name="7" /><br/>

    <input type="checkbox" value="足球" name="8" /><br/>

    <input type="checkbox" value="足球" name="9" /><br/>

    <input type="checkbox" value="足球" name="0" /><br/>

    <input type="button" value="全选" id="oi"/>

    <input type="button" value="不全选" id="po"/>

    <input type="button" value="反选" id="yu"/>

</body>
</html>

如有错误，欢迎联系我改正，非常感谢！！！

JS实现全选、反选、不选的更多相关文章

  1. JQ实现复选框的全选反选不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. wpf--------------datagrid全选反选 多选进行删除操作 前后台

    前台绑定 <DataGrid.Columns> <DataGridTemplateColumn > <DataGridTemplateColumn.HeaderTempl ...

  3. Android开发 ---基本UI组件5：监听下拉选项，动态绑定下拉选项、全选/反选，取多选按钮的值，长按事件，长按删除，适配器的使用，提示查询数据，activity控制多按钮

    效果图: 效果描述: 1.当点击 1 按钮后,进入选择城市的页面,会监听到你选中的城市名称:动态为Spinner绑定数据 2.当点击 2 按钮后,进入自动查询数据页面,只要输入首字母,就会动态查找以该 ...

  4. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  5. JS实现全选、不选、反选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

  6. js和jq实现全选反选

    在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...

  7. js实现全选,反选,全不选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

  8. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. elementUI+JS实现全选与反选

    在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...

随机推荐

  1. 求n个数中前k个数，按之前的顺序输出(HK IPM)

    For smaller k: #include <cstdio> #include <cstdlib> #include <cstring> #include &l ...

  2. unity脚本封装成dll

    先申明一下这样做是有需要的.当我们需要把脚本提供给第三方使用,而又不希望对方看到具体的实现过程,这时候就需要将代码封装编译成dll文件,供第三方调用.或是多个项目都要用到同一个模块或同样的功能,则可以 ...

  3. python---函数补充(变量传递），语句执行顺序（入栈顺序）

    一:函数补充 默认作为函数参数的数据,是浅拷贝传递.不是和C等语言一样,产生一个临时变量. class T: def __init__(self,num): print(id(num)) self.n ...

  4. css3-自定义字体

    参考链接http://www.w3cplus.com/content/css3-font-face 出处W3CPLUS css3-自定义字体   @font-face @font-face是CSS3中 ...

  5. [ONTAK2015]Bajtman i Okrągły Robin

    bzoj 4276: [ONTAK2015]Bajtman i Okrągły Robin Time Limit: 40 Sec  Memory Limit: 256 MB Description 有 ...

  6. 【官方文档】Nginx负载均衡学习笔记（二）负载均衡基本概念介绍

    简介 负载均衡(Server Load Balancer)是将访问流量根据转发策略分发到后端多台 ECS 的流量分发控制服务.负载均衡可以通过流量分发扩展应用系统对外的服务能力,通过消除单点故障提升应 ...

  7. PHP 命令行模式实战之cli+mysql 模拟队列批量发送邮件(在Linux环境下PHP 异步执行脚本发送事件通知消息实际案例)

    源码地址:https://github.com/Tinywan/PHP_Experience 测试环境配置: 环境:Windows 7系统 .PHP7.0.Apache服务器 PHP框架:ThinkP ...

  8. #import 指令

    [#import 指令] #import指令用于从一个类型库中结合信息.该类型库的内容被转换为C++类,主要用于描述COM界面. 语法 #import "文件名" [属性] #im ...

  9. dubbo Filter

    官方说明: 调用拦截扩展 扩展说明 服务提供方和服务消费方调用过程拦截,Dubbo 本身的大多功能均基于此扩展点实现,每次远程方法执行,该拦截都会被执行,请注意对性能的影响. 约定: 用户自定义 fi ...

  10. promise顺序执行，返回结果存放在数组

    遇到面试的一个编程题:三个返回promise对象的异步操作,让你写一个函数可以将这些操作顺序执行,并返回一个数组包含三个异步对象的结果 异步对象: // 异步函数a var a = function ...