checkbox 全选和取消全选-优快云博客

本文链接：https://blog.youkuaiyun.com/maple82924/article/details/83462973

本文介绍了一种使用JavaScript实现网页中全选功能的方法。通过两个不同的示例展示了如何针对同名和具有相同前缀名的复选框进行全选操作。此外，还提供了取消全选的功能。

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

转自： http://wangyu.iteye.com/blog/332945

http://wangyu.iteye.com/blog/190843

<html>   
<head>   
  
<SCRIPT LANGUAGE="JavaScript">   
function checkAll(e,itemName){    //全选函数 e为全选对象,itemName 为子name   
 var aa=document.getElementsByName(itemName);   
 for(var i=0;i<aa.length;i++){   
  aa[i].checked=e.checked;   
 }   
}   
  
function checkItem(e,allName){   //当选取或取消选取没一个复选框时调用的函数    
 var all=document.getElementById(allName); //全选框对象   
 if(!e.checked){      //如果是取消选取那么全选框就取消选取   
  all.checked=false;   
 }   
 else{                 //如果是选取，就要判断其他是否都已经全部选取了   
  var aa=document.getElementsByName(e.name);   
  for(var i=0;i<aa.length;i++){   
   if(!aa[i].checked){//如果有一个没有选上，那么就返回   
    return;   
   }   
  }   
  all.checked=true;//如果其他都选上了，全选框就要选上   
 }   
}   
</script>   
<title>全选</title><head>   
<body>   
 <div id='container'>   
      <table border=1 id='table1'>   
        <tr>   
            <th width="127" class='td1' align="left"><input type=checkbox id='selectAll' onclick='checkAll(this,"cb");'><label for='selectAll'>全选</label></th>   
            <th width="109">text</th>   
        </tr>   
           
        <tr>   
            <td class='td1'><input type=checkbox name='cb' onclick='checkItem(this,"selectAll");'></td>   
            <td class='center'>&nbsp;</td>   
        </tr>   
  
        <tr>   
            <td class='td1'><input type=checkbox name='cb'  
            onclick='checkItem(this,"selectAll");'></td>   
            <td class='center'>&nbsp;</td>   
        </tr>   
  
        <tr>   
            <td class='td1'><input type=checkbox name='cb'  
            onclick='checkItem(this,"selectAll");'></td>   
            <td class='center'>&nbsp;</td>   
        </tr>   
  
        <tr>   
            <td class='td1'><input type=checkbox name='cb'  
            onclick='checkItem(this,"selectAll");'></td>   
            <td class='center'>&nbsp;</td>   
        </tr>   
  
      </table>   
  
    </div>   
</body>   
</html>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>全选示例</title>
</head>

<body>
<form action="" method="post" name="loginForm">
/********************全选示例********************/<br>
<b>水果（checkbox同名）：</b><br>
<input type="checkbox" name="fruit" value="1">苹果<br>
<input type="checkbox" name="fruit" value="2">梨<br>
<input type="checkbox" name="fruit" value="3">桃<br>
<input type=button value="全选水果" onclick="checkAllFruit()">
<input type=button value="取消全选水果" onclick="unCheckAllFruit()"><br>

<b>蔬菜：</b><br>
<input type="checkbox" name="vegetable" value="4">大白菜<br>
<input type="checkbox" name="vegetable" value="5">西红柿<br>

<b>水果2（checkbox不同名，具有相同的前缀名）：</b><br>
<input type="checkbox" name="_fruit1" value="6">苹果<br>
<input type="checkbox" name="_fruit2" value="7">梨<br>
<input type="checkbox" name="_fruit3" value="8">桃<br>
<input type=button value="全选水果2" onclick="checkAllFruit2()">
<input type=button value="取消全选水果2" onclick="unCheckAllFruit2()"><br>

<input type="checkbox" name="vegetable" onclick="doChangeCheckStatus(this);">全选
<input type=button value="所有全选" onclick="checkAll()">
<input type=button value="取消所有全选" onclick="unCheckAll()">

</form>
</body>
</html>
<Script language="JavaScript">
function checkAll()
{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) {
            if(objs[i].type.toLowerCase() == "checkbox" )
                 objs[i].checked = true;

      }        

}
function checkAllFruit()
{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) {
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase() == "fruit")            
                    objs[i].checked = true;

      }        

}
function checkAllFruit2()
{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) {
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")
            {                
                    objs[i].checked = true;
            }
            
      }        

}
function unCheckAll()
{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) {
            if(objs[i].type.toLowerCase() == "checkbox" )            
                    objs[i].checked = false;

      }        

}
function unCheckAllFruit()
{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) {
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase() == "fruit")
                    objs[i].checked = false;

      }        

}
function unCheckAllFruit2()
{

    var objs = document.getElementsByTagName("input");
    for(var i=0; i<objs.length; i++) {
            if(objs[i].type.toLowerCase() == "checkbox" )
            if(objs[i].name.toLowerCase().substring(0,6) == "_fruit")
                    objs[i].checked = false;

      }        

}
function doChangeCheckStatus(obj)
{
    if(obj.checked==true)
    {
        checkAll();
    }
    else
    {
        unCheckAll();
    }
}

</script>