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

2018-11-20 03:18:30来源：博客园阅读 ()

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有