思路：通过选择全选的选框的状态stuts 即true/false控制其他选框。

首先 我们要通过.checked方法获取选框（全选/全不选）的值。

function all(){

   var stuts=document.getElementById("xuan").checked;

   console.log(stuts);

}

此时控制台会打印选中（true）和不选中（false）的值。

通过getElementsName获取名字相同的checke选框成一个集合，在通过遍历集合更改每个选框的状态值。

c[i].checked=stuts;

反选就是让状态值相反即可

 c[i].checked=!c[i].checked;

源码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <input type="checkbox" name="c">1<br>

 <input type="checkbox" name="c">2<br>

 <input type="checkbox" name="c">3<br>

 <input type="checkbox" name="c">4<br>

 <input type="checkbox" name="c">5<br>

 <input type="checkbox" name="c">6<br>

 <input type="checkbox" name="c">7<br>

 <hr>

 <input type="checkbox" id="xuan" onchange="a()">全选/全不选<br>

 <input type="button" id="fan" onclick="fan()" value="反选">

 <script>

   function a() {

     var stuts=document.getElementById("xuan").checked;

     var c=document.getElementsByName("c");

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

         c[i].checked=stuts;

     }

   }

   function fan() {

     var stuts=document.getElementById("fan");

     var c=document.getElementsByName("c");

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

       c[i].checked=!c[i].checked;

     }

   }

 </script>

 </body>

 </html>

js(四) 全选/全不选和反选的更多相关文章

  1. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  2. JS中表格的全选和删除要注意的问题

    在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...

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

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

  4. js实现全选/全不选、反选

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. asp.net中Repeater结合js实现checkbox的全选/全不选

    前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...

  6. js进阶 9-16 如何实现多选框全选和取消

    js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...

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

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

  8. 用 JS（JavaScript ）实现多选、全选、反选

    JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现全选.反选.多选 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  9. js之checkbox的代码全选/全不选，使用id获取元素，而不是name

    每当有多个选项的时候,都会有一种想法是:全选,全不选,如果子选项有被选,父选项也得被选. 注意:这里是根据id来获取元素的,但是不能直接用getElementById,因为那只能返回一个,而不是集合. ...

随机推荐

  1. PHP核心编程--目录操作（包含文件操作）

    一.目录操作 1.    创建目录 创建目录mkdir(目录名称)  //返回值为布尔 一次性创建主目录及其子目录 判断是不是一个目录is_dir  //返回true,false 判断目录或文件是否存 ...

  2. Java大数类BigDecimal及八种舍入模式的介绍

    BigDecimal的引入 在利用Java编程语言开发银行.金融类等需要对数值进行高精度计算的软件时,我们经常使用BigDecimal和BigInteger这两个大数据类,而不是常见的int.long ...

  3. 纯CSS3实现Metro Icon

    在线演示 本地下载

  4. 友盟iOS sdk整理

    文档中心 :http://dev.umeng.com 集成文档:http://dev.umeng.com/analytics/ios-doc/integration 报表中心:http://www.u ...

  5. Leetcode728.Self Dividing Numbers自除数

    自除数 是指可以被它包含的每一位数除尽的数. 例如,128 是一个自除数,因为 128 % 1 == 0,128 % 2 == 0,128 % 8 == 0. 还有,自除数不允许包含 0 . 给定上边 ...

  6. 【记录bug】npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsvents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents1.2.7: wanted {"os":"darwin

    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsvents): npm WARN nots ...

  7. poj 2229 【完全背包dp】【递推dp】

    poj 2229 Sumsets Time Limit: 2000MS   Memory Limit: 200000K Total Submissions: 21281   Accepted: 828 ...

  8. BZOJ 3884 上帝与集合的正确用法题解

    一道智慧题 其实解这题需要用到扩展欧拉定理, 有了上面的公式,我们不难看出此题的解法. 设b为2^2^2^2^2.....显然,b要比φ(p)要大,所以可以直接套公式 modp时的答案 ans(p)= ...

  9. 2019-8-31-PowerShell-拿到最近的10个系统日志

    title author date CreateTime categories PowerShell 拿到最近的10个系统日志 lindexi 2019-08-31 16:55:58 +0800 20 ...

  10. LeetCode73 Set Matrix Zeroes

    题目: Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place.(Me ...