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

最新推荐文章于 2021-07-03 15:30:06 发布

流年lh

最新推荐文章于 2021-07-03 15:30:06 发布

阅读量2.5k

点赞数

分类专栏： js 文章标签： javascript 前端开发

本文链接：https://blog.csdn.net/m0_37302495/article/details/72824585

版权

js 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

现如今全选，不选，反选在各大网站中普遍存在，其实是用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.οnclick=function(){
for(var i=0;i<two.length;i++)
{

two[i].checked=true;

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

}
}
buxuan.οnclick=function(){
for(var i=0;i<two.length;i++)
{
two[i].checked=false;
}
}
fanxuan.οnclick=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>