checkbox 全选和取消全选

bdk82924

浏览: 565317 次
性别:
来自: 南京

最近访客更多访客>>

javabang

zjzeric

zfantasy789

zhu1361

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVASCRIPT

JavaScript HTML Blog

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

分享到：

JFreeChart 相关参数 | JS获取当前对象大小高度

2009-09-22 17:07
浏览 1091
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

checkbox 全选和取消全选

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

checkbox 全选和取消全选

评论

发表评论

相关推荐

jQuery的Filp翻牌效果

图片延迟加载

JsonUtils 类，将任意数据格式转换为Json格式

jQuery插件flexigrid

DRW报错排查

Json教程、各平台开源组件及编辑预览工具站

(转)DWR如何获得返回对象 list Map Set list.add(JavaBean)(

弹出层_artDialog基于javascript编写的对话框组件

转：Ext Designer 可视化设计器及汉化全攻略

13个AJAX验证框架

JS 中面向对象的5种写法

用JavaScript实现asp中的UrlEncode和UrlDecode功能

常用的正则表达式

用JavaScript实现UrlEncode和UrlDecode功能

js 复制

JS获取当前对象大小 高度

IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结

Js date相关方法

Js 通过attachEvent增加事件

最近访客更多访客>>

JS获取当前对象大小高度