javascript 全选与反选

最新推荐文章于 2022-08-29 17:24:27 发布

阳哥爱吃饭

最新推荐文章于 2022-08-29 17:24:27 发布

阅读量316

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/zyp22343234/article/details/74356660

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box input{
                width:20px;
                height: 20px;
            }
        </style>
    </head>
    <body>
    <!--    这里是设置三个input按钮-->
        <input type="button" name="" id="qx" value="全选" />
        <input type="button" name="" id="bx" value="不选" />
        <input type="button" name="fx" id="fx" value="反选" />
        <!--下面是复选框-->
        <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"  /><br />        
        </div>
    </body>

    <script type="text/javascript">
//        获取一个id的函数
        function id(id){
            return document.getElementById(id);
        }
//      获取复选的盒子
        var oBox=id('box');
        var oIn=oBox.getElementsByTagName('input');

        id('qx').onclick=function(){//点击全选时运行函数
            for(i=0;i<oIn.length;i++){
            oIn[i].checked=true;// 让所有的复选框都选上，这里注意checked的c不能大写
            }
        }
        id('bx').onclick=function(){//点击不选时运行函数
            for(i=0;i<oIn.length;i++){
            oIn[i].checked=false;
            }
        }
            id('fx').onclick=function(){//点击反选时运行
            for(i=0;i<oIn.length;i++){//设置一个循环
            if(oIn[i].checked==true){//设置一个判定，如果单选框是选中状态
            oIn[i].checked=false;//就让单选框处于未选中状态
            }else{
                oIn[i].checked=true;//反之就让其选中
            }
            }
        }
    </script>
</html>