思路：通过选择全选的选框的状态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. 书写更加高效的CSS，走出误区

    根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS. 1.十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数 ...

  2. IOS开发基础篇--CAShapeLayer的strokeStart和strokeEnd属性

    http://blog.csdn.net/yixiangboy/article/details/50662704 一.案例演示 最近有一个小需求,就是要做一个圆形进度条,大概样子如下: . 在不知道有 ...

  3. job中shell脚本异常（删除不存在容器），导致job被打断执行的问题 脚本优化方法

    参考:  主要是添加shell的异常处理 https://www.cnblogs.com/AmilyWilly/p/7211168.html?utm_source=itdadao&utm_me ...

  4. ThinkPHP5.0中报错could not find driver的解决方式

    这个报错是我的tp5项目转移到另外的服务器中发生的错误, 其中报错信息中还包含这pdo等字眼 解决方法:在php.ini中开启php_pdp_mysql.dll

  5. 值得研究的J2EE开源项目推荐

    导读:笔者在学习J2EE的过程中发现了一些很有用,而且很值得学习的开源项目,在此推荐给大家. 关键词:J2EE 开源项目 J2SE JBoss SOA EJB   这篇文章写在我研究J2SE.J2EE ...

  6. prepareStatement设置参数，mysql数据出现中文‘？’的情景与解决方式

    在prepareStatement中传入中文的参数,mysql数据库中出现“?”号 try { Class.forName("com.mysql.jdbc.Driver"); co ...

  7. 【Leetcode链表】反转链表 II（92）

    题目 反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明: 1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, m ...

  8. phpcms多站点表单统一到主站点管理的解决方案

    1.在主站点新建子站点的表单向导,与子站点的设置保持一致 2.在各个子站点的数据库的表单数据表添加一个写入触发器,将新增的表单数据同步到主站点的数据库对应表里,这样主站点就能展示所有站点的表单数据 3 ...

  9. sql函数的使用——转换函数

    转换函数用于将数据类型从一种转为另外一种,在某些情况下,oracle server允许值的数据类型和实际的不一样,这时oracle server会隐含的转化数据类型,比如: create table ...

  10. Revit安装失败怎样卸载重新安装Revit，解决Revit安装失败的方法总结

    技术帖:Revit没有按照正确方式卸载,导致Revit安装失败.楼主也查过网上关于如何解决Revit安装失败的一些文章,是说删除几个Revit文件和Revit软件注册表就可以解决Revit安装失败的问 ...