js全选与反选实现代码

发布时间:2019-11-20编辑:脚本学堂
本文介绍了js实现的全选与反选的代码,js 全选与全不选的实现方法,有需要的朋友参考下。

js实现全选与反选,在IE和火狐中用Js的childNodes返回的结果是不同的。

IE是将一个完整标签作为一个节点。而 Firefox除了上述的的情况外,也把一个标签的结束符“>”到下一个标签的起始符“<”之间的内容(除注释外,包括任何的文字、空格、回 车、制表符)也算是一个节点了。

而且,这种节点也有其独特的属性和值--nodeName="#text"。

要在IE和火狐中兼容childNodes,则必须在火狐中滤掉那些多余的叫#text的节点。

例子,在IE和火狐上兼容的全选,反选和不选的js代码:
 

复制代码 代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=GBK" />
    <style type="text/css">
       li{
          display: inline;
          list-style:none;
      }
      #pan_testAll,#pan_testNall,#pan_testNone{
          cursor:pointer;;
      }
    </style>
</head>
    <body>
    //Js实现全选与反选
    <div>
     <ul class="pan_testMenue" id="pan_testMeneueId">
         <li id="pan_testAll">全选</li>
         <li id="pan_testNall">反选</li>
         <li id="pan_testNone">不选</li>
     </ul>
    </div>
    <div>
        <ul id="pan_testUlInfoId">
        <li><input type="checkbox" id="pan_testInfo">资料</li>
        <li><input type="checkbox"  id="pan_testResume">简历</li>
        <li><input type="checkbox"  id="pan_testOther">其他</li>
    </ul>
        </div>
    <script type="text/javascript">
        (function(){
            var ul1 = document.getElementById("pan_testMeneueId").childNodes;
            var ul2 = document.getElementById("pan_testUlInfoId").childNodes;
            var click = new Array();
            click[0] = function(){
                for(var i = 0; i < ul2.length; i ++){
                    if(ul2[i].nodeName != "#text"){    //滤掉无用节点
                    var temp1 = ul2[i].firstChild;
                    temp1.checked = true;
                }
                }
            }; // www.jb200.com
            click[1] = function(){
                for(var j = 0; j < ul2.length; j ++){
                    var temp2 = ul2[j].firstChild;  //获得li的子节点
                    if(ul2[j].nodeName != "#text"){  //滤掉无用节点
                    if(temp2.checked){
                        temp2.checked = false;
                    }else{
                        temp2.checked = true;
                    }
                }   }
            };
            click[2] = function(){

                for(var h = 0; h < ul2.length; h ++){
                    if(ul2[h].nodeName != "#text"){   //滤掉无用节点
                    var temp3 = ul2[h].firstChild;
                    temp3.checked = false;
                }
            }
            };
            function init(){   //初始化
              var index = 0;
              for(var n = 0; n < ul1.length; n ++){  //为每个li绑定一个单击事件
                  if(ul1[n].nodeName != "#text"){    //滤掉无用节点
                  if(ul1[n].addEventListener){
                      ul1[n].addEventListener("click",click[index++],false);
                  }else{
                      ul1[n].attachEvent("onclick",click[index++]);
                  }
               }
              }
            }
            window.onload = init;
        }());
    </script>
    </body>
</html>