思路：

1、获取元素。

2、用for循环历遍数组，把checkbox的checked设置为true即实现全选，把checkbox的checked设置为false即实现不选。

3、通过if判断，如果checked为true选中状态的，就把checked设为false不选状态，如果checked为false不选状态的，就把checked设为true选中状态。

<!DOCTYPE html>

<html>
    <head><meta charset="UTF-8"></head>
    <body>
        <div id="div">
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
            <input type="checkbox" /><br />
        </div>
        <input type="button" value="全选" onclick="CheckAll()"/><br />
        <input type="button" value="不选" onclick="UnCheck()"/><br />
        <input type="button" value="反选" onclick="othercheck()"/><br />
        <script>
            var CheckBox=div.getElementsByTagName('input');
             
            //全选
            function CheckAll(){
                for(i=0;i<CheckBox.length;i++){CheckBox[i].checked=true;};
            };
             
            //不选
            function UnCheck(){
                for(i=0;i<CheckBox.length;i++){CheckBox[i].checked=false;};
                };
             
            //反选
            function othercheck(){
                for(i=0;i<CheckBox.length;i++){
                    if(CheckBox[i].checked==true){ CheckBox[i].checked=false;}
                    else{ CheckBox[i].checked=true}
                }
            };
        </script>
    </body>
</html>

JS全选与不选、反选的更多相关文章

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

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

  2. 简单JS全选、反选代码

    1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  3. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  4. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  5. jquery实现全选，取消，反选的功能&实现左侧菜单

    1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. jQuery实现全选、不选和反选功能

    jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...

  7. jquery实现全选、不选、反选的两种方法

    在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...

  8. Java 多选框的全选、多选、反选（JQuery 实现）

    jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...

  9. JS全选按钮练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  10. 原生JS实现全选和不全选

    案例演示 源代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

随机推荐

  1. 201521123122 《java程序设计》第七周学习总结

    201521123122 <java程序设计>第七周实验总结 1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 ArrayList代码分析 1.1 ...

  2. 201521123031 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  3. 201521123079《java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过? ...

  4. 201521123069 《Java程序设计》 第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. (1)文档注释(类注释.方法注释.属性注释.通用注释.) (2)多态性.instanceof ...

  5. 201521123064 《Java程序设计》第3周学习总结

    1. 本章学习总结 2. 书面作业 Q1:代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...

  6. Win8打开chm右侧空白解决方法

    Win8下打开CHM文件,左侧有目录,但是右侧空白.而且打开的时候,还弹出很多IE窗口. 感觉应该不是文件本身的问题.下面是我的解决方法,其他系统也可以试一试. 最初打开文件如下 首先:1,右键关联c ...

  7. 201521123024 《java程序设计》 第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容.

  8. 201521123024 java 第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 finally 题目4-2 1.1 截图你的提交结果(出现学 ...

  9. Linux系统文件与目录权限管理

    Linux文件目录权限管理 一.Linux文件属性及权限 1.Linux文件及目录权限及属性说明 (1)权限及属性说明 (2)文件权限说明 三种权限说明:r 读  read w 写  write  x ...

  10. xml是什么，为什么要用xml

    XML概念 众所周知,xml常用语数据存储和传输,文件后缀为 .xml: 它是可扩展标记语言(Extensible Markup Language,简称XML),是一种标记语言. 标记,指计算机所能理 ...