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

最新推荐文章于 2022-04-13 20:46:09 发布

weixin_30376083

最新推荐文章于 2022-04-13 20:46:09 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fenghua13/p/9980685.html

本文介绍了一种使用JavaScript实现全选、反选和全不选功能的方法，通过简单的函数调用，可以轻松地控制页面上多个复选框的状态。代码示例展示了如何根据全选按钮的状态来改变一组具有相同名称属性的复选框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/fenghua13/p/9980685.html