<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>全选反选</title>

</head>

<body>

    <input type="button" value="全选" id="all">

    <input type="button" value="反选" id="reverse">

    <input type="checkbox" id="flagCheck">

    <ul id="checkboxList">

        <li><input type="checkbox"></li>

        <li><input type="checkbox"></li>

        <li><input type="checkbox"></li>

        <li><input type="checkbox"></li>

        <li><input type="checkbox"></li>

        <li><input type="checkbox"></li>

        <li><input type="checkbox"></li>

        <li><input type="checkbox"></li>

        <li><input type="checkbox"></li>

        <li><input type="checkbox"></li>

        <li><input type="checkbox"></li>

    </ul>

    <p>

        布尔属性，只要name即可，值可为空

        checked,selected,readonly,disabled....

    </p>

    <script type="text/javascript">

    //1.找节点

    var allBtn = document.querySelectorAll("#all")[0];

    var reverseBtn = document.querySelector("#reverse");

    var flagCheck = document.getElementById("flagCheck");

    var checkList = document.querySelectorAll("#checkboxList input");

    function checkAll() {

        for(var j = 0; j < checkList.length; j++) {

            if(!checkList[j].checked) {

                break;

            }

        }

        if(j == checkList.length) {

            // alert("全部为真")

            flagCheck.checked = true;

        }else {

            // alert("至少一个不为真");

            flagCheck.checked = false;

        }

    }

    //2.加事件

    //全选

    allBtn.onclick = function() {

        if(flagCheck.checked) {

            flagCheck.checked = false;

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

                checkList[i].checked = false;

            }

        }else {

            flagCheck.checked = true;

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

                checkList[i].checked = true;

            }

        }

    }

    //反选

    reverseBtn.onclick = function() {

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

            if(checkList[i].checked) {

                checkList[i].checked = false;

            }else {

                checkList[i].checked = true;

            }

        }

        //执行检查所有checkList是否被选上了

        checkAll();

    }

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

        checkList[i].onclick = checkAll;

    }

    </script>

</body>

</html>

效果图如下

上传这个是为了到某一天要用时忘记了也能找到笔记回忆起来(*^__^*) 嘻嘻！

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

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

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

  2. js全选与反选

    HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...

  3. js正则、js全选、反选、全不选、ajax批删

    <button onclick="fun1()">全选</button><button onclick="fun2()">全 ...

  4. js及jQuery实现checkbox的全选、反选和全不选

    html代码: <label><input type="checkbox" id="all"/>全选</label> < ...

  5. html+css+js实现复选框全选与反选

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

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

    JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  7. 前端之 JS 实现全选、反选、取消选中

    需求 制作如下可选表格,实现“全选”.“反选”.“取消”功能 代码示例 <!DOCTYPE html> <html lang="zh-CN"> <he ...

  8. elementUI+JS实现全选与反选

    在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...

  9. 复选框全选、反选及根据值JS控制复选框默认选中事件

    HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...

随机推荐

  1. 杭电1597--find the nth digit--假设：S1 = 1,S1=12,S3=123,S4=1234...

    我是把它分层来求的,也就是说第一层是1,第二层是12,第三层是123......你们该懂的!! #include <iostream>#include <cmath>using ...

  2. 【转】2014年25款最好的jQuery插件

    2014年25款最好的jQuery插件 来源:Specs' Blog-就爱PHP   时间:2014-12-30 10:24:10   阅读数:2267 分享到: 0 http://www.php10 ...

  3. Android中数据的传递以及对象序列化

    Android中当两个Activity需要有信息交互的时候,可以使用Intent.具体来说: 发送单一类型数据: 发送方: String data = "Hello SecondActivi ...

  4. useful tips for win7--close the noise volume(关掉win7开机、系统操作的声音)

    how to close the voice of your PC? i)   open your computer and then press F2 to enter the BIOS set-u ...

  5. c++ 数据类型转换： static_cast dynamic_cast reinterpret_cast const_cast

    c++ 数据类型转换: static_cast dynamic_cast reinterpret_cast const_cast  [版权声明]转载请注明出处 http://www.cnblogs.c ...

  6. php的__clone __call

    (1) __clone方法在一个对象赋值给另外的一个对象的时候自动调用 <?php class A { public $a = "aa"; public $b = 10; f ...

  7. 数据处理之CoreData

    一.CoreData数据库框架与Sqlite对比 Sqlite: 1.基于C接口, 需要使用sql语句, 代码繁琐 2.在处理大量数据时, 表关系更直观 3.在OC中不是可视化的 CoreData: ...

  8. ie6下js更新元素display:block后，仍然不显示的hack办法

    $hotGames.html(html).removeClass("hide").show();//代码执行到这里,在ie6下仍然无法正常显示 //只有执行了下边的两行代码后,才正 ...

  9. 安全协议系列（二）----CCM与CCMP

    CCMP(CTR with CBC-MAC Protocol) 是 IEEE 802.11i 中推出使用基于 AES 的 CCM 模式的安全加密协议.与原来脆弱的 WEP 算法及临时补救措施 TKIP ...

  10. CSS3扩展技术

    我们使用扩展技术编写代码时,需要先用编译器将我们的文件进行编译,编译后的文件才能够使用. less技术相关语法 less相对来说比较简单,语法也较少:     变量的定义:     @w:20px; ...