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. java多线程 -- 同步鎖

    为了解决多线程安全问题在 Java 5.0 之前,协调共享对象的访问时可以使用的机制只有 synchronized 和 volatile .Java 5.0 后增加了一些新的机制,但并不是一种替代内置 ...

  2. mysql INNER/LEFT/RIGHT JOIN区别

    1.创建table DROP TABLE IF EXISTS `tab_id_index`; CREATE TABLE `tab_id_index` ( `id` ) ', `name` ) DEFA ...

  3. Android Studio aidl文件路径自定义问题

    1.aidl旧文件夹中添加的内容无法编译 sourceSets中主要是把把src/main/aidl文件也作为java.srcDirs, resources.srcDirs,这样当编译程序时,AIDL ...

  4. 解题：洛谷4314 CPU监控

    题面 线段树·二重标记(什么鬼 用(a,b)标记表示先执行+a操作,然后对b取max,维护历史/当前最大值和历史/当前标记.然后我们发现区间加$x$就是$(x,-inf)$,区间赋$x$就是$(-in ...

  5. Python 爬虫入门（一）

    毕设是做爬虫相关的,本来想的是用java写,也写了几个爬虫,其中一个是爬网易云音乐的用户信息,爬了大概100多万,效果不是太满意.之前听说Python这方面比较强,就想用Python试试,之前也没用过 ...

  6. 题解【CF103D Time to Raid Cowavans】

    Description 给一个序列 \(a\) ,\(m\) 次询问,每次询问给出 \(t, k\) .求 \(a_t + a_{t+k}+a_{t+2k}+\cdots+a_{t+pk}\) 其中 ...

  7. MyEclipse和Eclipse中jsp、html格式化自动排版问题

    一.myeclipse的漂亮排版设置 步骤: 在左侧快捷 “搜索” 框里面输入 html . 点击选中左侧HTML Source . line - width 是设置当前行里面有多少字符时,就换行.这 ...

  8. 多角度看.NET面试题

    1．ASP.NET中的身份验证有那些?你当前项目采用什么方式验证请解释        身份验证是从用户获取名称和密码等标识凭证并根据某些机构验证这些凭据的过程.如果凭据有效,则提交该凭据的实体被视为通 ...

  9. python json dumps loads

    请看以上图片可知 1. python requests里面返回的是json 字符串, 说白了是字符串.不能直接取里面对应的值. 2. 取值的话,需要把json字符串转换成字典, 用json.loads ...

  10. POJ3233_Matrix Power Series_矩阵幂_C++

    题目:http://poj.org/problem?id=3233 这是今天考试的题目,结果没想出来写了个暴力30分,看完题解之后觉得自己是SB 首先暴力就是一个个乘然后相加,时间是O(kn3),极限 ...