Linux中国 Linux中国门户站!
设为主页 设为主页
收藏本站 收藏本站
 
当前位置 :首页 ->网站设计 ->JavaScript ->正文

javascript实现datagrid客户端checkbox列的全选,反选

来源:Linuxdby.com 作者:Webmaster 时间:2007-06-05 点击: [收藏] [投稿]

最简格式:这是一个偷巧的方法,但不通用。前提是这个页面只有一个datagrid,且只有datagrid中有checkbox;这个就比较方便。主要思路就是搜索出整个页面的checkbox,将它们全部选中或反选。
// 全选
function allCheck()
{
for (var i=0;i<Form1.elements.length;i++)
{
var e=Form1.elements[i];
if (e.type=='checkbox')
e.checked=true;
}

}
//反选
function revCheck()
{
for (var i=0;i<Form1.elements.length;i++)
{
var e=Form1.elements[i];
if (e.type=='checkbox')
e.checked=!e.checked;
}
}


通用简单格式
因为asp.net页面中生成datagrid中的checkbox,他的ID是要改变的,所以我们寻找它们的规律,就可以准确的找到这个控件,从而进行全选和反选及选中的操作,
 参数说明:
prefix:前缀;s:选择框ID;chk:选择框的ID;


function getObj( objID )
{
 return document.getElementById( objID );
}

// 全选
function _SelectAll( prefix,s,chk )
{
 var oArr = _GetColl( prefix,s,chk );
 for( var o in oArr )
 {
  oArr[o].checked = true;
 }
}
// 反选
function _RevSelect( prefix,s,chk )
{
 var oArr = _GetColl( prefix,s,chk );
 for( var o in oArr )
 {
  oArr[o].checked = !oArr[o].checked;
 }
}

// 获值
function _GetColl( prefix,s,chk )
{
 var i = s;
 var oArr = new Array();
 while( true)
 {
  var o = getObj( prefix + '__ctl' + i + '_' + chk);
  if( o != null )
  {
   oArr.push( o );
  }
  else
  {
   break;
  }
  i++;
 }
 
 return oArr;
}
// 检查是否选中
function _CheckSelect( prefix,s,chk )
{
 var oArr = _GetColl( prefix,s,chk );
 for( var o in oArr )
 {
  if( oArr[o].checked)
  {
   return true;
  }
 }
 return false;
 
}

推荐通用详细格式:http://www.cnblogs.com/ghd258/archive/2005/11/07/270449.html#Post
/* 分页
  2    参数说明:
  3    prefix:前缀;chkAll:全选框;chkSingle:单选框ID
  4   
  5    使用方法:
  6    if(e.Item.ItemType == ListItemType.Header)
  7    {
  8        ((CheckBox)e.Item.Cells[1].FindControl("chkAll")).Attributes.Add("onclick","CheckAll('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
  9    }
 10*/
 11function CheckAll(prefix,chkAll,chkSingle)
 12{
 13    var indexChkAll;
 14    if(prefix.length != 0)
 15    {
 16        indexChkAll        = prefix + "__ctl2_" + chkAll;
 17    }
 18    else
 19    {
 20        indexChkAll        = chkAll;
 21    }
 22    var objChkAll = document.getElementById(indexChkAll);
 23    var tempObj;
 24    for(var i=0;i<document.forms[0].elements.length;i++)
 25    {   
 26        tempObj = document.forms[0].elements[i];
 27        if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
 28        {
 29            tempObj.checked = objChkAll.checked;
 30        }
 31    }
 32}
 33/**//* 分页
 34    参数说明:
 35    prefix:前缀;chkAll:全选框;chkSingle:单选框ID
 36   
 37    使用方法:
 38    if(e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
 39    {
 40        ((CheckBox)e.Item.Cells[1].FindControl("chkSingle")).Attributes.Add("onclick","CheckSingle('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
 41    }
 42*/
 43function CheckSingle(prefix,chkAll,chkSingle)
 44{
 45    var indexChkAll;
 46    if(prefix.length != 0)
 47    {
 48        indexChkAll        = prefix + "__ctl2_" + chkAll;
 49    }

 如果您对本文有任何疑问或者建议,请到讨论区发表您的意见: >> 论坛入口 <<



上一篇:用于自动添加Digg This!按钮的JavaScript   下一篇:javascript实现划词标记划词搜索功能

文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【我要投稿】 【论坛讨论
更多相关文章
Power by linux-cn.com 粤ICP备05006655号