JavaScript实现全选、不选、反选功能

最新推荐文章于 2022-10-31 20:05:16 发布

another静静

最新推荐文章于 2022-10-31 20:05:16 发布

阅读量1.2k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/yj928674542/article/details/75196920

版权

点击全选按钮，下面的列表项会被全部选择；
点击不选按钮，选项全部取消选择；
先在列表中选择几项，再点击反选按钮，之前被选择的会取消选择，之前没被选择的会变成选择状态。

下面是实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hh</title>
<script type="text/javascript">
    window.onload=function(){
        var oBtn1=document.getElementById('btn1');
        var oBtn2=document.getElementById('btn2');
        var oBtn3=document.getElementById('btn3');
        var oDiv=document.getElementById('div1');
        var oCh=oDiv.getElementsByTagName('input');
        oBtn1.onclick=function()
        {
            for (var i = 0; i < oCh.length; i++) 
            {
            oCh[i].checked=true;
            }           
        };

        oBtn2.onclick=function()
        {
            for (var i = 0; i < oCh.length; i++) 
            {
            oCh[i].checked=false;
            }           
        };
        oBtn3.onclick=function()
        {
            for (var i = 0; i < oCh.length; i++) 
            {
                if (oCh[i].checked==true)
                    oCh[i].checked=false;
                else
                    oCh[i].checked=true;
            }           
        };
    };

</script>
</head>

<body>
<input id="btn1" type="button" value="全选">
<input id="btn2" type="button" value="不选">
<input id="btn3" type="button" value="反选"><br>

<div id="div1">
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
</div>
</body>
</html>