<!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. MySQL5.6 GTID、多线程复制

    MySQL5.6新特性GTID.多线程复制 在Oracle发布MySQL5.6看到众多新特性之后很兴奋,包括对复制的改进.在MySQL5.5半同步复制之后MySQL5.6又引入GTID.多线程复制,在 ...

  2. MRPT笔记——使用编译好的MRPT库建立VS2013项目

    接着上一篇<MRPT在VS2013中的配置>,下面接收如何使用编译好的MRPT建立工程项目. 一.设置环境变量 上一篇中,配置MRPT时,使用到了几个相关库,opencv.zlib.wxW ...

  3. 开启关闭keditor 过滤

    filterMode: false, K.create('#txt_content', { uploadJson: '/js/kindeditor-4.1.10/upload_json.ashx', ...

  4. Go语言实现简单的一个静态WEB服务器

    package main import ( "net/http" ) func main() { http.Handle("/", http.FileServe ...

  5. run VLC in root

    sed -i 's/geteuid/getppid/' /usr/bin/vlc

  6. 整合了一个功能强大完善的OA系统源码，php全开源 界面漂亮美观

    整合了一个功能强大完善的OA系统源码,php全开源界面漂亮美观.需要的同学联系Q:930948049

  7. poj3693

    //Accepted 12004 KB 407 ms /* source:poj3693 time :20150819 by :songt */ /*题解: 搞了一天,总算弄完了 首先,我们来明确一个 ...

  8. cookie 保存导航菜单的展开状态

    菜单展开状态保存,最开始是用session来存的,用session存没点击一次菜单就会多次访问后台页面,影响页面加载速度,后来改用js的cookie来存:代码如下 //获取cookie         ...

  9. java EE中使用PO和VO的注意事项

    1.基本定义  PO(Persistence Object 持久化对象)是直接跟持久层数据库打交道的java Bean (model,entity,bean等叫法都是可以的),里面除了私有的成员变量之 ...

  10. 4 多表代替密码之Hill 密码_1 矩阵工具类

    在说明Hill加密之前要先复习线性代数的知识,主要是关于矩阵的一些运算和概念. 一.矩阵的逆: 定义方阵M的逆矩阵应该满足M*M^-1==I,其中I是单位矩阵,比如: 但是这个地方是对英文字母进行加密 ...