Dom操作--全选反选

我们经常会在网站上遇到一些多选的情况，下面我就来说说使用Dom写全选反选的思路。

全选思路：
首先，我们来分析一下知道，当我们点击"全选"复选框的时候，所有的复选框应该都被选中，那我们就可以给"全选"复选框注册一个事件，就是如果全选按钮被选中的话，那么其他所有复选框都被选中；然后就是其他复选框部分选中或全不选中，那么"全选"复选框不选中。

反选思路：
我们知道，当我们点击反选按钮，那么就把除"全选"之外的所有复选框的选中状态取反（之前选中的为不选中，之前不选中的为选中），在根据这些复选框的选中状态来判断"全选"是否选中。

<html>

    <head>

        <title></title>

        <script type="text/javascript">

            function f1(){

                var gender=document.getElementsByName("sex");

                for(var i=;i<gender.length;i++){

                    if(gender[i].checked){

                        alert(gender[i].value);

                        break;

                    }

                }

            }

            function checkAll(){

                var checkAll=document.getElementById("checkAll");

                var checkboxs=document.getElementsByTagName("input");

                for(var i=;i<checkboxs.length;i++){

                    if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){

                        checkboxs[i].checked=checkAll.checked;

                    }

                }

            }

            window.onload=function(){

                var checkboxs=document.getElementsByTagName("input");

                for(var i=;i<checkboxs.length;i++){

                    if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){

                        //给子checkbox动态注册事件

                        checkboxs[i].onclick=function(){

                            //定义一个变量记录"全选"checkbox的选中状态，默认为选中

                            var isCheckAll=true;

                            for(var j=;j<checkboxs.length;j++){

                                //过滤出不是checkbox和全选的控件

                                if(checkboxs[j].type=="checkbox"&&checkboxs[j].id!="checkAll"){

                                    //判断子checkbox控件是否选中

                                    if(!checkboxs[j].checked){

                                        //只要有一个checkbox控件没有选中，那么全选checkbox就不选中

                                        isCheckAll=false;

                                    }

                                }

                            }

                            document.getElementById("checkAll").checked=isCheckAll;

                        }

                    }

                }

            }

            function reCheck(){

                var checkboxs=document.getElementsByTagName("input");

                for(var i=;i<checkboxs.length;i++){

                    if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){

                        checkboxs[i].checked=!checkboxs[i].checked;

                    }

                }

                var isCheckAll=true;

                for(var i=;i<checkboxs.length;i++){

                    if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){

                        if(!checkboxs[i].checked){

                            isCheckAll=false;

                        }

                    }

                }

                document.getElementById("checkAll").checked=isCheckAll;

            }

        </script>

    </head>

    <body>

        <input type="radio" value="nan" name="sex"/>男

        <input type="radio" value="nv" name="sex"/>女<br/>

        <input type="button" value="性别" onclick="f1()"/><br/>

        <input id="checkAll" type="checkbox" onclick="checkAll()"/>全选<br/>

        <input id="check1" type="checkbox" value="chifan"/>吃饭<br/>

        <input id="check2" type="checkbox" value="shuijiao"/>睡觉<br/>

        <input id="check3" type="checkbox" value="dadoudou"/>打豆豆<br/>

        <input id="reCheck" type="button" value="反选" onclick="reCheck()"/><br/>

    </body>

</html>

巴特西

Dom操作--全选反选

最新文章

热门文章