全选反选和不选

最新推荐文章于 2024-05-04 21:01:28 发布

panchao199022

最新推荐文章于 2024-05-04 21:01:28 发布

阅读量96

点赞数

分类专栏： Web前端文章标签： firefox JavaScript ie childNodes兼容 ViewUI

本文链接：https://blog.csdn.net/panchao199022/article/details/84510325

版权

Web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在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>
<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;
}
}
};
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>