您的位置：首页 > Web前端 > JavaScript

《JavaScript学习笔记四》：getElementsByTagName的使用以及全选、反选和取消功能实现

2016-05-29 20:39 525 查看

《JavaScript学习笔记四》：getElementsByTagName的使用以及全选、反选和取消功能实现

我们都知道getElementById是通过id来获取对象，但是，当我们的对象许多且这些对象都是相同的时候，如果还使用getElementById来一个一个的来获取对象就比较坑爹了，是吧，因此，就有了getElementsByTagName来通过标签来获取对象数组。

例如：var aBtn=document.getElementsByTagName(“input”);就是获取input下的type=”button”的button对象数组。

还是以一个例子来进行说明：

在我们的生活中，许多网页都存在“全选” “反选” “取消”等功能，下面我们就来实现这一功能。

思路比较简单，

实现代码如下：

<!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=gb2312" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
//得到所有的button对象
var oDiv=document.getElementById('div1');

var aBtn=oDiv.getElementsByTagName('input');
//得到所有的checkbox对象
oDiv=document.getElementById('div2');

var aCheckBox=oDiv.getElementsByTagName('input');

for(var i=0;i<aBtn.length;i++)
{
aBtn[i].onclick=function ()
{
if(this.value==="全选")  //注意：这里不能写aBtn[i]==="全选"
{
for(var j=0;j<aCheckBox.length;j++)
{
aCheckBox[j].checked=true;
}

}
else if(this.value==='取消')
{
for(var j=0;j<aCheckBox.length;j++)
{
aCheckBox[j].checked=false;
}

}
if(this.value==='反选')
{
for(var j=0;j<aCheckBox.length;j++)
{
if(aCheckBox[j].checked==true)
{
aCheckBox[j].checked=false;
}
else
{
aCheckBox[j].checked=true;
}

}

}
};  //注意：这里有一个分号
}

};
</script>
</head>

<body>
<div id="div1">
<input type="button" value="全选"  />

<input type="button" value="反选"  />

<input type="button" value="取消"  />
</div>
<div id="div2">
<input type="checkbox"  checked="true"/><br />

<input type="checkbox"  /><br />

<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>
</html>


在上面的代码实现中，遇到了一个问题，刚开始我在每个按钮的onclick事件中使用了aBtn[i].value====”全选”这样的语句，发现这样是不行的，错误的，只能使用this.value===”全选”,这就涉及到this关键字的使用了，这个以后再说

在debug的过程中，由于一致没有找出这个错误，因此，就写了下面这个版本：每个按钮的onclick都对应一个function。

<!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=gb2312" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');

var oDiv=document.getElementById('div2');
var aCheckBox=oDiv.getElementsByTagName('input');

var len=aCheckBox.length;
//全选
oBtn1.onclick=function ()
{
for(var i=0;i<len;i++)
{
aCheckBox[i].checked=true;
}
};
//反选
oBtn2.onclick=function ()
{
for(var i=0;i<len;i++)
{
if(aCheckBox[i].checked==true)
{
aCheckBox[i].checked=false;
}
else
{
aCheckBox[i].checked=true;
}

}
};
//取消
oBtn3.onclick=function ()
{
for(var i=0;i<len;i++)
{
aCheckBox[i].checked=false;
}
};

};
</script>
</head>

<body>

<input id="btn1" type="button" value="全选"  />

<input id="btn2" type="button" value="反选"  />

<input  id="btn3" type="button" value="取消"  />
<div id="div2">
<input type="checkbox"  checked="true"/><br />

<input type="checkbox"  /><br />

<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>
</html>


小结

例子虽然简单，但遇到的bug还是挺难让人发现的也，可能还是自己对js了解的不够吧
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航