input单选框全选与反选

最新推荐文章于 2024-03-14 21:58:00 发布

weixin_30550271

最新推荐文章于 2024-03-14 21:58:00 发布

阅读量224

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ns10086/p/5130790.html

版权

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>

转载于:https://www.cnblogs.com/ns10086/p/5130790.html

weixin_30550271

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input单选框全选与反选

input单选框全选与反选<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单选框全选与反选</title></head><body><p>单选框全选与反选&...
复制链接

扫一扫