<!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. Codeforces Round #371 (Div. 1)

    A: 题目大意: 在一个multiset中要求支持3种操作: 1.增加一个数 2.删去一个数 3.给出一个01序列,问multiset中有多少这样的数,把它的十进制表示中的奇数改成1,偶数改成0后和给 ...

  2. java 字符串转成 json 数组并且遍历

    当需要把一串字符串转成一个json 数组 ,并遍历其中的内容时. 首先要导入 net.sf.json.JSONArray和net.sf.json.JSONObject 两个jar 包 String s ...

  3. DataList无数据如何显示

    <FooterTemplate> <asp:Label runat="server" ID="emptyLb" Text="No D ...

  4. father of the archangel of death"?

    e wields an axe, a sword and a machine gun and his battlefield pranks have become as legendary as hi ...

  5. Isolation-based Anomaly Detection

    Anomalies are data points that are few and different. As a result of these properties, we show that, ...

  6. IELTS - Word List 28

    1, The lawsuit is very much o the lawyer's mind. 2, The canteen was absolutely packed. 3, Doctors di ...

  7. NVelocity用法(转)

    每个人应该知道的NVelocity用法   NVelocity是一个基于.NET的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template language)来 ...

  8. 实用工具【SqlPrompt】 【Subline】 【XMind】 【PhotoShop】 【TakeColor】 【Q+】本次只讨论SqlPrompt

    SqlPrompt[Sqlserver智能提示插件] 1.SqlPrompt可实现sql智能提示,并且会自动关键字大写,如select * from 表名[表名包含的字符],如果实在不知道表名可以按c ...

  9. 第十章 嵌入式Linux的调试技术

    对调试工具进行简介.Linux中提供了一类工具,通过这些工具可以逐行跟踪程序的代码,用于测试用户空间程序的gdb.gdbserver和调试内核空间程序的kgdb. 用gdb调试用户空间程序:gdb可跟 ...

  10. C++11 auto_ptr 的问题

    auto_ptr作为最早的智能指针,可以实现以RAII手法管理堆区对象,但它设计的本意只是简单的利用C++对于栈区对象的自动析构管理堆区对象, 并不像shared_ptr那样包含引用计数,可以在每次拷 ...