input单选框全选与反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框全选与反选</title>
</head>
<body>
<p>单选框全选与反选</p>
    
    <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>

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

相关阅读:
INNODB在裸设备上的性能简单测试
java interface 不能存常量数组？
jfreechart linux图片中文显示乱码解决方法
linux下tomcat工程从oracle读取中文出现乱码
java读取文件输出流出现的问题
运用mysqldump 工具时注意的问题
ibatis中字段名问题
oracle 定长字段查询问题，ibatis 与pl/sql查询的char类型字段查询不同
ibatis #跟$的区别
C#取整相关

原文地址：https://www.cnblogs.com/ns10086/p/5130790.html