首页 > PHP资讯 > HTML5培训技术 > html中的javascript 全选/取消全选操作示例代码

html中的javascript 全选/取消全选操作示例代码

HTML5培训技术

  点评:全选/取消全选在批量操作数据时经常会使用到,下文有个不错的示例使用js完成全选/取消全选操作,感兴趣的朋友可以参考下

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<script type="text/javascript" language="javascript"> 
function selectAllDels() 
{ 
var allCheckBoxs = document.getElementsByName("preDelCheck"); 
var desc = document.getElementById("allChecked"); 
var selectOrUnselect=false; 
for(var i = 0; i < allCheckBoxs.length; i ++ ) 
{ 
if(allCheckBoxs[i].checked){ 
selectOrUnselect=true; 
break; 
} 
} 
if (selectOrUnselect) 
{ 
_allUnchecked(allCheckBoxs); 
}else 
{ 
_allchecked(allCheckBoxs); 
} 
} 
function _allchecked(allCheckBoxs){ 
for(var i = 0; i < allCheckBoxs.length; i ++ ) 
{ 
allCheckBoxs[i].checked = true; 
} 
} 
function _allUnchecked(allCheckBoxs){ 
for(var i = 0; i < allCheckBoxs.length; i ++ ) 
{ 
allCheckBoxs[i].checked = false; 
} 
} 
</script> 
</head> 
<body> 
<p>test</p> 
<form> 
<input type="checkbox" name="preDelCheck" value="cream">ID1

<input type="checkbox" name="preDelCheck" value="sugar" >ID2

<input type="checkbox" name="preDelCheck" value="sugar">ID3

<input type="checkbox" name="preDelCheck" value="sugar">ID4

<input type="checkbox" name="preDelCheck" value="sugar">ID5

<input type="button" id="allChecked" value="全选/取消全选" onClick="selectAllDels()"> 
</form> 
</body> 
</html> 

南京HTML5培训

本文由欣才IT学院整理发布,未经许可,禁止转载。