原生JavaScript实现全选,反选,全不选(源码分享)

  时间:2018-11-19
本文章向大家介绍js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码,需要的朋友可以参考一下

 

使用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>

原文地址:http://www.manongjc.com/article/19231.html