js实现全选全不选反选

最新推荐文章于 2020-10-21 21:45:42 发布

sweetllh

最新推荐文章于 2020-10-21 21:45:42 发布

阅读量348

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sweetllh/article/details/70477960

版权

javascript 专栏收录该内容

73 篇文章 3 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>全选全不选反选</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }

        body{
            margin: 30px 20px;
            font-size: 16px;
            color: #666;
        }

        div{margin-bottom: 20px;}
        label{margin-right: 15px;}

        li{
            list-style: none;
            height: 25px;
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div>
        <label for="">全选<input type="checkbox" id="checkAll" /></label>
        <label for="">全不选<input type="checkbox" id="checkNo" /></label>
        <label for="">反选<input type="checkbox"  id="checkReserve"/></label>
    </div>
    <ul>
        <li><input type="checkbox" name="item"/>1.....</li>
        <li><input type="checkbox" name="item"/>2.....</li>
        <li><input type="checkbox" name="item"/>3.....</li>
        <li><input type="checkbox" name="item"/>4.....</li>
        <li><input type="checkbox" name="item"/>5.....</li>
        <li><input type="checkbox" name="item"/>6.....</li>
    </ul>
</body>
<script type="text/javascript">
    window.onload = function(){
        var oItems = document.getElementsByName('item');
        var oCheckAll = document.getElementById('checkAll');
        var oCheckNo = document.getElementById('checkNo');
        var oCheckReserve = document.getElementById('checkReserve');

        //全选
        oCheckAll.onclick = function(){
            for(var i=0;i<oItems.length;i++){
                oItems[i].checked=true;
            }
        };

        //全不选
        oCheckNo.onclick = function(){
            for(var i=0;i<oItems.length;i++){
                oItems[i].checked=false;
            }
        };

        //反选
        oCheckReserve.onclick = function(){
            for(var i=0;i<oItems.length;i++){
                if(oItems[i].checked==true){
                    oItems[i].checked=false;
                }
                else{
                    oItems[i].checked=true;
                }
            }
        }   
    }
</script>
</html>

sweetllh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现全选全不选反选

<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>全选全不选反选</title> <style type="text/css"> *{ padding: 0; margin: 0; } bo
复制链接

扫一扫