JavaScript-选择项中的全选、全不选、反选

最新推荐文章于 2022-03-22 22:53:30 发布

zLanaDelRey

最新推荐文章于 2022-03-22 22:53:30 发布

阅读量208

点赞数

分类专栏：前端文章标签：前端学习

本文链接：https://blog.csdn.net/zLanaDelRey/article/details/79908731

版权

前端专栏收录该内容

30 篇文章 4 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
    <script>
    window.onload=function(){
        var oBtn1=document.getElementById('btn1');
        var oBtn2=document.getElementById('btn2');
        var oBtn3=document.getElementById('btn3');
        var oDiv=document.getElementById('div1');
        var aCh=document.getElementsByTagName("input");

        //点击全选按钮后，全部选中
        oBtn1.onclick=function()
        {
            for(var i=0;i<aCh.length;i++)
            aCh[i].checked=true;
        }

        //点击不选按钮后，选择全部取消
        oBtn2.onclick=function()
        {
            for(var i=0;i<aCh.length;i++)
            aCh[i].checked=false;
        }

        //点击反选按钮后，选择项取消，未被选择项选择
        //注意if语句里使用的是双等号，属于判断
        //其他语句里是单等，属于赋值
        oBtn3.onclick=function()
        {
            for(var i=0;i<aCh.length;i++)
            if(aCh[i].checked==true)
            {
            aCh[i].checked=false;
            }else{
            aCh[i].checked=true;
            }
        }
    }
    </script>
</head>
<body>
    <input id="btn1" type="button" value="全选"/>
    <input id="btn2" type="button" value="不选"/>
    <input id="btn3" type="button" value="反选"/>
<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>
    <div id="btn"></div>
</div>
</body>
</html>