javascript 全选与反选

来源：互联网发布：ubuntu修改ip地址命令编辑：程序博客网时间：2024/05/22 13:53
<!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>
阅读全文
1 0