通过js来制作复选框的全选和不选效果

290 阅读 0 评论 192 点赞

我是靠谱客的博主潇洒大米，这篇文章主要介绍通过js来制作复选框的全选和不选效果，现在分享给大家，希望可以做个参考。

复制代码代码如下:

 
<html> 
<head> 
<title>制作全选效果</title> 
<script language="javascript"> 
function selectAll(){ 
allcheckBoxs=document.getElementsByName("a"); 
var a2=document.getElementsByName("a1"); 
if(a2[0].checked){ 
for(var i=0;i<allcheckBoxs.length;i++){ 
allcheckBoxs[i].checked = true; 
} 
}else{ 
for(var i=0;i<allcheckBoxs.length;i++){ 
allcheckBoxs[i].checked = false; 
} 
} 
} 
</script> 
</head> 
<body> 
<form name="myform"> 
<table> 
<tr><td colspan="2"><img src="images/head.jpg"/></td></tr> 
<tr> 
<td><input type="checkbox" name="a1" onclick="selectAll()" />全选/全不选</td> 
<td> <img src="images/top.jpg"/></td> 
</tr> 
<tr><td><input type="checkbox" name="a" /></td><td><img src="images/one.jpg"/></td></tr> 
<tr><td><input type="checkbox" name="a" /></td><td><img src="images/two.jpg"/></td></tr> 
<tr><td><input type="checkbox" name="a" /></td><td><img src="images/three.jpg"/></td></tr> 
<tr><td><input type="checkbox" name="a" /></td><td><img src="images/four.jpg"/></td></tr> 
</table> 
</form> 
</body> 
</html> 