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. myeclipse2015修改web项目部署名

    在旧版本的myeclipse中修改web项目部署名很方便,直接右键在properties中查找web就能进行修改. 但是myeclipse2015中发现不能直接修改了. 我们可以点击config,或者 ...

  2. Android Studio下“Error:Could not find com.android.tools.build:gradle:2.2.1”的解决方法

    ref from: Android Studio下“Error:Could not find com.android.tools.build:gradle:2.2.1”的解决方法http://blog ...

  3. 解题：POI 2006 PRO-Professor Szu

    题面 这个题是比较套路的做法啦,建反图后缩点+拓扑排序嘛,对于所有处在$size>=2$的SCC中的点都是无限解(可以一直绕) 然后注意统计的时候的小细节,因为无限解/大解也要输出,所以我们把这 ...

  4. bzoj1027【JSOI2007】合金

    题目描述 某公司加工一种由铁.铝.锡组成的合金.他们的工作很简单.首先进口一些铁铝锡合金原材料,不同种类的原材料中铁铝锡的比重不同.然后,将每种原材料取出一定量,经过融解.混合,得到新的合金.新的合金 ...

  5. BZOJ 3505 [Cqoi2014]数三角形

    3505: [Cqoi2014]数三角形 Description 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个.下图为4x4的网格上的一个三角形.注意三角形的三点不能共线. Input ...

  6. POI导入excel文件2

    POI上传到服务器读取excel文件1中已经介绍了上传文件和导入excel所有的内容http://www.cnblogs.com/fxwl/p/5896893.html , 本文中只是单单读取本地文件 ...

  7. C/C++:copy control (拷贝控制)

    前言:当定义一个类的时候,我们显示或者隐式地指定在此类型的对象拷贝,移动,赋值,销毁时做些什么,一个类通过定义五种特殊的成员函数来控制这些操作,包括拷贝构造函数,拷贝赋值运算符,移动构造函数,移动赋值 ...

  8. 题解 P2486 【[SDOI2011]染色】

    写在前面 对于刚学树剖的同学比如我这种大大大蒟蒻来说,做这题会给你带来很大的提升:不仅可以对树剖有更深刻的理解,还可以更好的理解线段树,所以这是一道好题哦 为了更好懂,我一点一点说说思路吧 思路 首先 ...

  9. Centos7远程桌面 vnc/vnc-server的设置

    Centos7与Centos6.x有了很大的不同. 为了给一台服务器装上远程桌面,走了不少弯路.写这篇博文,纯粹为了记录,以后如果遇到相同问题,可以追溯. 1.假定你的系统没有安装vnc的任何软件,那 ...

  10. 如何给list清空

    1.list = new ArrayList<String>(): 2.list.clear(); 3.list=null;