getElementsByTagName用法示例之全选，不选，反选

来源：互联网发布：知呱呱靠不靠谱编辑：程序博客网时间：2024/06/06 06:59

现如今全选，不选，反选在各大网站中普遍存在，其实是用getElementsByTagName结合JS做成的，下面介绍一下详细做法，顺便把getElementsByTagName用法说一下。

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

</style>
</head>
<body>
<input type="button" id="aa" value="全选" />
<input type="button" id="aa1" value="不选" />
<input type="button" id="aa2" value="反选" />
<div id="bb">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>
</body>
<script type="text/javascript">
var quanxuan=document.getElementById("aa");
var buxuan=document.getElementById("aa1");
var fanxuan=document.getElementById("aa2");

var one=document.getElementById("bb");

要把两种input标签区分出来，所以单选框input用一个div包起来，要想选择div中的input必须先选择div

var two=one.getElementsByTagName("input");

//在这里getElementsByTagName是选择名字为dd的div中的所有input标签

quanxuan.onclick=function(){
for(var i=0;i<two.length;i++)
{

two[i].checked=true;

// two[i]可能有不理解的，[ ]的里面是下标，下标都是从0开始的。two[i]就是说选择下标为 i 的input标签

}
}
buxuan.onclick=function(){
for(var i=0;i<two.length;i++)
{
two[i].checked=false;
}
}
fanxuan.onclick=function(){
for(var i=0;i<two.length;i++)
{
if(two[i].checked==true)
{
two[i].checked=false;
}
else
{
two[i].checked=true;
}
}
}
</script>
</html>

阅读全文

0 0