Javascript全选,反选,全不选的实现代码

发布时间:2020-05-31编辑:脚本学堂
本文介绍下,用javascript实现全选、反选、全不选的代码,有需要的朋友参考下。

使用js实现全选、反选、全不选。

代码如下:

<html>  
<head>
<script type="text/javascript">
function checkEvent(name,allCheckId) 
{  
  var allCk=document.getElementById(allCheckId);
  if(allCk.checked==true)  
  checkAll(name);  
  else
  checkAllNo(name);  
}  
  
//全选  
function checkAll(name)  
{
  var names=document.getElementsByName(name);
  var len=names.length;
  if(len>0)  
  {  
   var i=0;  
   for(i=0;i<len;i++)  
   names[i].checked=true;  
  }
}  
  
//全不选  
function checkAllNo(name) 
{
  var names=document.getElementsByName(name);  
  var len=names.length;
  
 if(len>0)  
  {
    var i=0;  
    for(i=0;i<len;i++)
    names[i].checked=false;  
  }  
}  
  
//反选  
function reserveCheck(name)  
{
  var names=document.getElementsByName(name);  
  var len=names.length;  
  
 if(len>0) 
 {
 var i=0;
   for(i=0;i<len;i++)  
   {
     if(names[i].checked)
     names[i].checked=false;  
     else
     names[i].checked=true;  
   }  
 }
}
</script>
</head>
<body>  
<input type="checkbox" id="ckall" onclick="checkEvent('ckcontact','ckall')" />全选  
<input type="checkbox" id="ckReserve" onclick="reserveCheck('ckcontact','ckReserve')" />反选  
<br />  
<input type="checkbox" name="ckcontact" value="1" />篮球  
<br />
<input type="checkbox" name="ckcontact" value="2" />旅游  
<br />  
<input type="checkbox" name="ckcontact" value="3" />读书  
<br />  
<input type="checkbox" name="ckcontact" value="4" />美食  
<br />  
<input type="checkbox" name="ckcontact" value="5" />睡觉  
</body>
</html>