原生js的联动全选

最新推荐文章于 2022-07-04 10:26:33 发布

dianjiao8565

最新推荐文章于 2022-07-04 10:26:33 发布

阅读量121

点赞数

原文链接：http://www.cnblogs.com/lisaShare/p/10396231.html

版权

开发应用中有很多工具可以使用，下面介绍一个原生js写的联动全选思路！！！

<!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>联动全选</title>
</head>
    <script>
        window.onload = function(){
            // 在input外部添加一个box, 作用：为了更加精准的获取到要操作的input标签
            var oBox = document.getElementById('box');
            var aInput = oBox.getElementsByTagName('input');
            var oBtn = document.getElementById('btn');
            
            // 点击全选按钮的操作
            oBtn.onclick = function(){
                if(this.checked == true){ // 如果当前按钮使选中的状态，就让下面所有的选中
                    for(var i=0;i<aInput.length;i++){
                        aInput[i].checked = true;
                    }
                    
                }else{
                    for(var i=0;i<aInput.length;i++){
                        aInput[i].checked = false;
                    }
                    
                }
            }
            // 给每一个子集按钮都加上点击事件
            for(var i=0;i<aInput.length;i++){
                aInput[i].onclick = function(){
                    var n = 0;
                    for(var i=0;i<aInput.length;i++){
                        if(aInput[i].checked == true){
                            n++;
                        }
                    }
                    // document.title = n;
                    if(n == aInput.length){
                        oBtn.checked = true;
                    }else{
                        oBtn.checked = false;
                    }
                }
            }
        }
    </script>
<body>
    <input type="checkbox" id="btn"/>全选
    <br />
    <br />
    <div id="box">
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" />   
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/lisaShare/p/10396231.html

dianjiao8565

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js的联动全选

开发应用中有很多工具可以使用，下面介绍一个原生js写的联动全选思路！！！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
复制链接

扫一扫