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

时间:2022-03-14 10:25:26

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

最简格式
这是一个偷巧的方法,但不通用。前提是这个页面只有一个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是要改变的,所以我们寻找它们的规律,就可以准确的找到这个控件,从而进行该控件的全选和反选及选中的操作,
想知道参数的说明和页面中元素的ID,可以通过getElementID来测试参看控件ID的格式.
function getElementID()
{
 for (var i=0;i<Form1.elements.length;i++)
 {
 var e=Form1.elements[i]; 
 alert(e.id)    //查看控件元素ID
    }
}

以下函数中参数说明:
prefix:前缀. checkbox所在的上级控件名.如checkbox在Datagrid中,则前缀就是该Datagrid的ID.
s:选择框的初始ID号;好像从2开始
chk:选择框的ID;


// 根据复选框ch1的值设置全选或全不选
function selectAllOrNot( prefix,s,chk )
{
 var oArr =document.getElementById("ch1");
  if( oArr.checked == true )
  {
    _SelectAll( prefix,s,chk );
  }
  else
  {
   _SelectAllNot( prefix,s,chk );
  }
}

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

// 全不选
function _DisSelectAll( prefix,s,chk )
{
 var oArr = _GetColl( prefix,s,chk );
 for( var o in oArr )
 {
  oArr[o].checked = false;
 }
}

// 反选
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);  // ElementId的格式'Datagrid1__ctl2_Checkbox1'
  if( o != null )
  {
   oArr.push( o );
  }
  else
  {
   break;
  }
  i++;
 }
 return oArr;
}

// 获的控件元素
 function getObj( objID )
{
 return document.getElementById( objID );
}

// 检查是否选中
function _CheckSelect( prefix,s,chk )
{
 var oArr = _GetColl( prefix,s,chk );
 for( var o in oArr )
 {
  if( oArr[o].checked)
  {
   return true;
  }
 }
 return false;
}
 
调用例子:

javascript实现datagrid客户端checkbox列的全选,反选<INPUT id="ch1" onclick="selectAllOrNot('Datagrid1',2,'Checkbox1')" type="checkbox" value="" name="全选">
javascript实现datagrid客户端checkbox列的全选,反选