`
bdk82924
  • 浏览: 551542 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

checkbox 全选和取消全选

JavaScriptHTMLBlog 
阅读更多

转自： 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>

 

 

分享到：
| JS获取当前对象大小 高度
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics