js实现简单的全选、全不选

最新推荐文章于 2022-09-10 10:02:58 发布

LLL_LH

最新推荐文章于 2022-09-10 10:02:58 发布

阅读量665

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/87991080

版权

js 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js实现全选</title>
</head>
<body>
    <div>
        <ul>
            <li><input id="selectAll" type="checkbox" value="全选" />全选</li>
            <li><input name="fruit" type="checkbox" value="苹果" />苹果</li>
            <li><input name="fruit" type="checkbox" value="香蕉" />香蕉</li>
            <li><input name="fruit" type="checkbox" value="橘子" />橘子</li>
            <li><input name="fruit" type="checkbox" value="圣女果" />圣女果</li>
            <li><input name="fruit" type="checkbox" value="甘蔗" />甘蔗</li>
        </ul>
    </div>
    <script>
        //DOM操作
        var selectAll = document.getElementById('selectAll'); //获取全选元素
        var input = document.getElementsByName('fruit'); //获取其他input元素
        var num = 0;
        //全选全不选的时候
        function isSelectALl(flag){
            for(var i = 0; i < input.length; i++){
                input[i].checked = flag;                
            }
        }
//点击全选
        selectAll.onclick = function(){            
            if(selectAll.checked){
                isSelectALl(true);
                num = input.length;
            }else{
                isSelectALl(false);
                num = 0;
            }
        }
//点击其他选项
        input.forEach(function(item,index){
            item.onclick = function(){
                if(item.checked == false){
                    num --;
                    selectAll.checked = false;
                }else{
                    num ++;
                }
                console.log(num,input.length);
                if(item.checked == true && num == input.length){
                    selectAll.checked = true;
                }
            }
        })
        
    </script>
</body>
</html>

LLL_LH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现简单的全选、全不选

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫