JS实现全选和反选

最新推荐文章于 2024-04-02 19:39:43 发布

黎成诃月

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量6k

点赞数 1

分类专栏：前端-javaScript

本文链接：https://blog.csdn.net/weixin_40292626/article/details/82225446

版权

前端-javaScript 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JS实现全选和反选</title>
</head>
<script>
window.οnlοad=function(){
    var btns =document.getElementById('checkItem').children;
    var inps =document.getElementById('content').children;
    function check(e){
        for(var i=0;i<inps.length;i++){
            inps[i].checked=e;
        }
    };
    btns[0].οnclick=function(){
        check(true)
    }
   btns[1].οnclick=function(){
        check(false)
    }
    btns[2].οnclick=function(){
        for(var i=0;i<inps.length;i++){
            if(inps[i].checked==true){
               inps[i].checked=false
           }else{
           inps[i].checked=true
           }
        // inps[i].checked==true ? inps[i].checked=false:inps[i].checked=true;
        }
    }
}
</script>
<body>
<div id='checkItem'>
   <input type="button" value="全选" />
   <input type='button' value="取消" />
   <input type='button' value="反选"/>
</div>
<div id="content">
   <input type="checkbox" name="">xxxxx
   <input type="checkbox" name="">xxxxx
   <input type="checkbox" name="">xxxxx
   <input type="checkbox" name="">xxxxx
   <input type="checkbox" name="">xxxxx
   <input type="checkbox" name="">xxxxx
   <input type="checkbox" name="">xxxxx
   <input type="checkbox" name="">xxxxx
   <input type="checkbox" name="">xxxxx
   <input type="checkbox" name="">xxxxx
   <input type="checkbox" name="">xxxxx
   <input type="checkbox" name="">xxxxx

</div>
</body>
</html>

黎成诃月

关注

1
点赞
踩
6

收藏

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

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt; JS实现全选和反选&lt;/title&gt;&lt;/head&gt;&lt;script&gt; window.
复制链接

扫一扫

专栏目录