思路：通过选择全选的选框的状态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. vue中router以及route的使用

    路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...

  2. 面试问题：Vuejs如何实现双向绑定

    最近出去面试,栽在这个问题上,提到vuejs,面试官一般会让你说vuejs的特点,一般就要回答virtual dom tree, dom tree diff, 以及数据双向绑定,然后面试官会追问你,v ...

  3. COOKIE与SESSION的详解

    cookie与session的小例子: 包含cookie记住登录名,session防止用户非法登录2个例子: 问我拿吧,这个下载连接挂了 描述 cookie过程描述 网站为了辨别用户身份.进行 ses ...

  4. Sublime Text3 安装less

    1.安装Sublime 插件 (1)安装LESS插件:因为Sublime不支持Less语法高亮,所以,先安装这个插件,方法: ctrl+shift+p>install Package>输入 ...

  5. [idea]idea配置Jrebel 标签： ideatomcatjrebel 2017-03-14 09:23 547人阅读 评论(21

    上篇博客讲了如何为idea设置tomcat,这篇博客要给大家推荐Jrebel,其实eclipse上也可以配置Jrebel,但是在使用eclipse的时候并没有发现这些东西,还是习惯使然,对一个比较熟悉 ...

  6. Oracle使用——Oracle表字段的增加、删除、修改和重命名

    增加字段 语法 alter table tablename add (column datatype [default value][null/not null]); 说明:alter table 表 ...

  7. Python发送邮件(带附件的)

    有时候做自动化测试任务,任务完成后,需要将结果自动发送一封邮件,这里用到smtplib模块,直接导入就行,这里以163邮箱为例,需要用到授权码,我用类写一下: 如果是发送qq邮箱,要将smtp 改成s ...

  8. NS2学习笔记

    这两天在调一个仿真程序,比较奇怪的错误,就是一个节点广播消息,在它通信半径内的节点收不到消息,一直在通信上找问题,找了半天也没找到. 最后,用gdb调试,发现在一个操作指针处发生了段错误,引起的原因时 ...

  9. 小爬爬4:12306自动登录&&pyppeteer基本使用

    超级鹰(更简单的操作验证) - 超级鹰 - 注册:普通用户 - 登陆: - 创建一个软件(id) - 下载示例代码 1.12306自动登录 # Author: studybrother sun fro ...

  10. String字符串的比较 Day15

    package com.sxt.review; /* * String字符串的比较 * ==和equals() * 总结:比较String内容时用equals()方法 */ public class ...