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. C 语法中static 和inline联合使用

    最近在学习阶段,翻阅代码.发现有一个用法比较让我奇怪,就上网查了一下 ? 1 static inline void somefunction(void); 这里是举例说明,这行代码是放在.h文件中的. ...

  2. 关于strassen矩阵乘法的矩阵大小不是2^k的形式时，时间复杂度是否还是比朴素算法好的看法

    原来是n,找到大于等于n且是2^k形式的数m.n*n的矩阵补全为m*m的矩阵,原来的矩阵放在最左上方,其它位置的值为0.朴素方法:n^3现在:m^2.8即m/n需小于e^(3/2.8)=2.919才能 ...

  3. P1147 连续自然数和

    P1147 连续自然数和 题目描述 对一个给定的自然数 M ,求出所有的连续的自然数段,这些连续的自然数段中的全部数之和为 M . Solution 两点问题 弄两个点 \(l,r\) , 因为前缀和 ...

  4. python安装pymssql

    安装pymssql pip install pymssql 关于python安装pymssql报错export PYMSSQL_BUILD_WITH_BUNDLED_FREETDS=1 然后再 pip ...

  5. bzoj千题计划143：bzoj1935: [Shoi2007]Tree 园丁的烦恼

    http://www.lydsy.com/JudgeOnline/problem.php?id=1935 二维偏序问题 排序x,离散化树状数组维护y #include<cstdio> #i ...

  6. ZeroMQ API（八） 异常&属性

    1.错误处理 1.1 zmq_errno() 1.1.1 名称 zmq_errno - 为调用线程检索errno的值 1.1.2 概要 int zmq_errno(void); 1.1.3 描述 zm ...

  7. bootstrap-tooltip+validate

    名称 返回类型 描述 validate(options) 返回:Validator 验证所选的FORM valid() 返回:Boolean 检查是否验证通过 rules() 返回:Options 返 ...

  8. 如何创建一个https的站点（超简单） 以及 IIS7.5绑定Https域名

    1.申请免费1年的ssl证书(传送门:https://common-buy.aliyun.com/?spm=5176.2020520163.cas.29.N0xOPM&commodityCod ...

  9. HDU 1715 大斐波数 加法高精度

    解题报告:求 斐波那契数,不过这题的n的范围是1000,肯定是早就超过了的,所以要用到高精度,所以这题其实就是一个加法高精度的题. 我的做法 是写一个大数相加的函数,然后打表就是了,这里注意的就是每次 ...

  10. HDU 2722 Here We Go(relians) Again (最短路)

    题目链接 Problem Description The Gorelians are a warlike race that travel the universe conquering new wo ...