全选和反选函数的封装

最新推荐文章于 2020-12-18 17:10:24 发布

qq_26892503

最新推荐文章于 2020-12-18 17:10:24 发布

阅读量252

点赞数

文章标签： JS全选和反选函数封装

本文链接：https://blog.csdn.net/qq_26892503/article/details/86137687

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.function(){
            var btns=document.getElementsByTagName("button");
            var inps=document.getElementsByTagName("input");
            function all(flag){
                for(var i=0;i<inps.length;i++){
                    inps[i].checked=flag;
                }
            }
            btns[0].onclick=function(){
                all(true);
            };
            btns[1].onclick=function(){
                all(false);
            };
            btns[2].onclick=function(){
               for(var j=0;j<inps.length;j++){
                   inps[j].checked==true?inps[j].checked=false:inps[j].checked=true;
               }
            }
        }
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="top">
        <button>全选</button>
        <button>取消</button>
        <button>反选</button>
    </div>
    <ul>
        <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>
</div>

</body>
</html>