<!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. arrayLen

    var i;for (i = categoryList.length - 1; i >= 0; i -= 1) { var categoryValue=categoryList[i]; if ( ...

  2. 《Pro Express.js》学习笔记——Express框架常用设置项

    Express 设置 系统设置 1.       无须再定义,大部分有默认值,可不设置 2.       常用设置 env view cache view engine views trust pro ...

  3. (转)Oracle 在Drop表时的Cascade Constraints

    Oracle 在Drop表时的Cascade Constraints 假设A为主表(既含有某一主键的表),B为从表(即引用了A的主键作为外键).则当删除A表时,如不特殊说明,则 drop table  ...

  4. spring通过静态方法获得properties文件的值

    获得spring bean方法 @Component public class BeanUtils implements ApplicationContextAware { private stati ...

  5. Mysql数据库的一些命令_LInux

    查看当前数据库的版本,因为有些命令在不同版本中 用法有可能不一样,注意 -V 是大写字母V[root@localhost ~]# mysqladmin -Vmysqladmin  Ver 8.42 D ...

  6. druid.properties的配置

    driverClassName=com.mysql.jdbc.Driver url=jdbc:mysql://NoOne:3306/eyes<!--需修改--> username=root ...

  7. Android APP使用NDK编译后的ffmpeg库出现undefined reference to 'posix_memalign'错误

    在android程序中使用NDK编译后的ffmpeg库的时候出现了如下错误: jni/libs/libavutil.a(mem.o): in function av_malloc:libavutil/ ...

  8. 2.4G/5G频段WLAN各国使用信道表

    List of WLAN channels (维基百科):https://en.wikipedia.org/wiki/List_of_WLAN_channels 2.4G 5G 另附美国5G允许使用的 ...

  9. firefox,跨域ajax 调用方法

    在A站点ajax 调用B站的页面(方法)时, 使用post,且dataType类型为jsonp 有时在IE会有No Transport的错误提示,请加 jQuery.support.cors = tr ...

  10. ie7 用 clearfix 清除浮动时遇到的问题

    <!doctype html> <html> <head> <style> .fr{float:right;display:inline} li{bor ...