前端js设置全选按钮

最新推荐文章于 2021-11-06 11:13:02 发布

verd

最新推荐文章于 2021-11-06 11:13:02 发布

阅读量1.9k

点赞数 3

分类专栏： js学习文章标签： js全选按钮 JavaScript全选按钮前端

本文链接：https://blog.csdn.net/qq_41902066/article/details/90450843

版权

js学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

全选按钮的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="btn">
    <input  type="checkbox" />全选<br />
</div>
<div>
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br />
</div>
</body>
</html>

js代码

 window.onload = function () {
            var oBtn = document.getElementById('btn');
            var aInput = document.getElementsByTagName('input');
            oBtn.onclick=function () {
                //var i;
                if(aInput[0].checked===true)
                {
                    for(var i=1; i<aInput.length; i++)
                        aInput[i].checked=true;
                }
                else{
                    for(var i=1; i<aInput.length; i++)
                        aInput[i].checked=false;

                }
                for(var i=1; i<aInput.length; i++)
                {
                    aInput[i].onclick=function () {
                        if(!this.checked)
                        {
                            aInput[0].checked=false;
                        }

                    }

                }

            }
        }

慢慢来总会有收获

verd

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端js设置全选按钮

全选按钮的HTML代码<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> <title>Title</title></head&gt...
复制链接

扫一扫