DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript實現datagrid客戶端checkbox列的全選,反選
javascript實現datagrid客戶端checkbox列的全選,反選
編輯:關於JavaScript     

最簡格式:這是一個偷巧的方法,但不通用。前提是這個頁面只有一個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    

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved