技术点:通过document.getElementsByTagName(‘标签’);来获取多个选择元素,将会导致获取到其他无关的元素,如以下代码:
<!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=utf-8" />
<title>无标题文档</title>
</head>
<script>
window.onload=function(){
var ck=document.getElementsByTagName('input');<!--此时获取的是body里面全部的input标签元素,包括button,与原意不符-->
};
</script>
<body>
<input id="but1" type="button" value="全选"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</body>
</html>
解决办法:给所要选择的input标签的外层添加一个div,通过该div的id 来获取其中的input标签,代码如下:
<!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=utf-8" />
<title>无标题文档</title>
</head>
<script>
window.onload=function(){
var di=document.getElementById('div1');<!--先获取div,再通过div来获取其中的input-->
var ck=di.getElementsByTagName('input');<!--此时获取的是body里面全部的input标签元素,包括button,与原意不符-->
var bt1=document.getElementById('but1');
var bt2=document.getElementById('but2');
var bt3=document.getElementById('but3');
bt1.onclick=function(){
for(i=0;i<ck.length;i++){
ck[i].checked=true;
}
}
bt2.onclick=function(){
for(i=0;i<ck.length;i++){
if(ck[i].checked==true){ck[i].checked=false;}
else{ck[i].checked=true;}
}
}
bt3.onclick=function(){
for(i=0;i<ck.length;i++){
ck[i].checked=false;
}
}
};
</script>
<body>
<input id="but1" type="button" value="全选"/>
<input id="but2" type="button" value="反选"/>
<input id="but3" type="button" value="不选"/>
<div id="div1">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>
</body>
</html>