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

悠悠 2022-06-15 10:45 149阅读 0赞

![20170531222025893][]

**现如今全选，不选，反选在各大网站中普遍存在，其实是用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>

[20170531222025893]: /images/20220615/a3d21272fa4541e690e9c5afdd01d3e6.png