超超超哥2010
- 浏览: 30224 次
-
文章分类
最新评论
在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>
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>
分享到：
发表评论
-
冒泡方法
2014-04-20 11:49 653JavaSciprt事件中有两个很重要的特性：事件冒泡 以及目 ... -
offsetparent
2014-04-20 10:30 572offsetParent属性返回一个对象的引用，这个对象是距离 ... -
js函数
2014-03-08 17:38 01.js函数的实参对象argume ... -
js对象
2014-02-25 21:09 01.在js中所有实例对象都从同一个原型对象上继承属性。 2.构 ... -
js笔记
2014-02-23 18:48 01.函数在定义它的作用域中执行，而不是在调用它的作用域中执行 ... -
HTTP请求状态码
2014-02-12 15:54 5652012-04-01 10:54:07| 分类： Java ... -
JS获取元素的一些属性和设置元素的宽度等属性
2013-12-28 13:53 2068转】JS获取元素的一些属性和设置元素的宽度等属性 client ... -
xslt 去掉空格
2013-12-18 18:22 0XSLT中用normalize-space函数来清除元素的前后 ... -
高性能web开发 - 如何加载JS，JS应该放在什么位置？
2013-11-10 18:39 772外部JS的阻塞下载 所有浏览器在下载JS的时候，会阻止 ... -
1． XML与配对的XSL文件
2013-11-06 16:30 638a) 1.xml <?xml vers ... -
spring mvc
2013-10-11 22:44 514一、前言： 大家好，Spring3 MVC是非常优秀的MVC ... -
cookie 和session 的区别详解
2013-09-25 17:14 381这些都是基础知识，不 ...
相关推荐
JS实现全选反选全不选
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
在Windows应用程序开发...总之，`DataGridView`表头添加`CheckBox`实现全选反选涉及了控件创建、事件处理、数据绑定以及用户交互等多个方面。理解这些知识点可以帮助开发者更有效地构建功能丰富的数据查看和编辑界面。
而在这个特定的场景中，我们需要实现一个增强的功能：在`DataGridView`的列头添加一个`CheckBox`，通过这个`CheckBox`可以实现所有行中对应复选框的全选或反选操作。这个功能在数据管理界面中十分常见，例如在批量...
本话题将深入探讨“jQuery全选反选插件”的相关知识点，这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先，jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上，当用户需要对一组选项进行...
在本教程中，我们将探讨如何利用C#实现复选框来控制DataGridView的数据全选、反选以及全不选，并在选中复选框后改变行的颜色。这将涉及到事件处理、数据绑定、自定义样式等多个方面。 首先，我们需要创建一个包含复...
全选反选的核心思想是通过更改一个主复选框的状态（通常被称为“全选”按钮）来同步所有子复选框的状态。当“全选”按钮被选中时，所有子复选框应被选中；反之，如果“全选”按钮被取消选中，所有子复选框则应被取消...
本示例中的"JS简单表格列表全选反选代码"是一个使用原生JS编写的功能，它允许用户通过点击表头按钮来实现表格数据的全选和反选操作。这个功能在处理大量数据时特别有用，例如在用户需要批量操作表格项时。 1. **...
在网页开发中，全选和反选功能是常见的交互元素，尤其在表格或者多选项列表中，用户可能希望一键选择所有项目或清除已选。在这个案例中，我们将探讨如何使用HTML和jQuery来实现这一功能。 首先，我们需要创建HTML...
用Axure RP 8.0做的原型设计列子，作用是复选框做全选和非全选，已选的做反选。可以学习下反选或非反选的交互思路。
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
在网页开发中，表格（Table）是常用的数据...总的来说，实现HTML表格中复选框的全选与反选功能主要依赖于JavaScript和CSS（用于样式），这是一项基础但重要的交互设计。理解并掌握这个功能，有助于提升网页的用户体验。
在涉及到表单元素如复选框（Checkbox）时，经常需要实现全选、反选和全不选的功能。下面将详细探讨 jQuery 如何实现这些功能，以及如何进行表单验证。 1. **全选功能** 要实现全选功能，首先我们需要一个主复选框...
C#的WinForm项目的dataGridView控件的CheckBox的全选、全不选、反选、单选、导出全部、仅导出已选择的项目到Excel的功能。简单明了，一看就懂。 我的腾讯微博：http://t.qq.com/djk8888
对于“全选”、“全不选”和“反选”功能，jQuery 提供了简洁的解决方案，同时也可以方便地获取选中的元素值。以下我们将详细探讨如何使用 jQuery 实现这些功能。 1. **全选**： 全选功能通常应用于具有多选选项的...
axure复选框全选反选效果.rp
综上所述，实现Android全选反选对话框需要创建自定义对话框布局，绑定数据，设置事件监听，以及处理用户的选择。通过这种方式，我们可以提供一个高效且直观的多选操作界面，增强用户在Android应用中的交互体验。
在JavaScript编程中，全选和反选功能是常见的交互元素，尤其在表格或者多选列表中，用户往往希望一键选择或取消所有选项。本话题将深入探讨如何利用JavaScript实现这样的功能，以提升用户体验。 首先，我们需要理解...