zoukankan      html  css  js  c++  java
  • JS——全选与反选

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

    效果图如下

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

  • 相关阅读:
    html和css简介;
    包装函数,面向切面的函数实现;
    RegExp
    javascript基础语法&5
    用Pyinstaller把Python3.7程序打包成可执行文件exe
    Idea下安装Lombok插件
    Moco框架jar下载地址
    安装时后的idea,项目不能运行,pom.xml文件不能下载到本地仓库,maven配置是正确的
    如何使用Git命令将项目从github或者服务器上克隆下来
    github怎么创建一个项目,怎么添加一个ssh-key的客户
  • 原文地址:https://www.cnblogs.com/Gog2016/p/5479649.html
Copyright © 2011-2022 走看看