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语言开发的产品,需要部署到客户现场服务器.产生了对代码进行保护的需求,开始研究代码加密方式. 经过研究分析后有两种思路,混淆和加密.两者各自适应不同的情况. 由于大量spring注解功能,并且 ...

  2. 解题：POI 2011 Dynamite

    题面 从零开始的DP学习系列之叁 树形DP的基本(常见?)思路:先递归进儿子,然后边回溯边决策,设状态时常设$dp[x]$表示以$x$为根的子树中(具体分析算不算$x$这个点)的情况 显然的二分答案, ...

  3. 【DP】【CF1097D】 Makoto and a Blackboard

    更好的阅读体验 Description 给定一个数 \(n\),对它进行 \(k\) 次操作,每次将当前的数改为自己的因数,包括 \(1\) 和自己.写出变成所有因数的概率是相等的.求 \(k\) 次 ...

  4. E. Mahmoud and Ehab and the function Codeforces Round #435 (Div. 2)

    http://codeforces.com/contest/862/problem/E 二分答案 一个数与数组中的哪个数最接近: 先对数组中的数排序,然后lower_bound #include &l ...

  5. 线性判别分析 LDA

    点到判决面的距离 点\(x_0\)到决策面\(g(x)= w^Tx+w_0\)的距离:\(r={g(x)\over \|w\|}\) 广义线性判别函数 因任何非线性函数都可以通过级数展开转化为多项式函 ...

  6. lumen 增加视图路径

    在 ServiceProvider 里面加上 app('view')->addLocation(module_path('Develop') . '/resources/views');

  7. WHY C++ ?(by Herb Sutter) & C++17 standard

    WHY C++ ? C++

  8. Python【操作EXCEL文件】

    #Python中,对EXCEL文件的读写操作需要安装.导入几个第三方模块#xlrd模块:只能读取EXCEL文件,不能进行写操作#xlwt模块:只能进行写操作,但是不能是覆盖写操作(也就是修改Excel ...

  9. VS批处理命令使用

    在项目开始生成或者生成完成后想做一些操作,比如去编译非解决方案下的的项目,完成编译后复制文件到某个文件夹之类的纠结需求. 1. 基本使用 预先生成事件命令行,可以在项目编译的过程中运行 后期生成事件命 ...

  10. JAVA核心技术I---JAVA开发环境配置

    一:常常有看到Java SE,Java EE,Java ME,那么他们的区别呢? 1. Java SE(Java Platform,Standard Edition  java平台标准版). Java ...