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

时间:2021-08-14 09:46:21

最简格式:这是一个偷巧的方法,但不通用。前提是这个页面只有一个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
/* 分页
  2javascript实现datagrid客户端checkbox列的全选,反选    参数说明:
  3javascript实现datagrid客户端checkbox列的全选,反选    prefix:前缀;chkAll:全选框;chkSingle:单选框ID
  4javascript实现datagrid客户端checkbox列的全选,反选    
  5javascript实现datagrid客户端checkbox列的全选,反选    使用方法:
  6javascript实现datagrid客户端checkbox列的全选,反选    if(e.Item.ItemType == ListItemType.Header)
  7javascript实现datagrid客户端checkbox列的全选,反选    {
  8javascript实现datagrid客户端checkbox列的全选,反选        ((CheckBox)e.Item.Cells[1].FindControl("chkAll")).Attributes.Add("onclick","CheckAll('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
  9javascript实现datagrid客户端checkbox列的全选,反选    }
 10javascript实现datagrid客户端checkbox列的全选,反选*/

 11javascript实现datagrid客户端checkbox列的全选,反选function CheckAll(prefix,chkAll,chkSingle)
 12javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选{
 13javascript实现datagrid客户端checkbox列的全选,反选    var indexChkAll;
 14javascript实现datagrid客户端checkbox列的全选,反选    if(prefix.length != 0)
 15javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
 16javascript实现datagrid客户端checkbox列的全选,反选        indexChkAll        = prefix + "__ctl2_" + chkAll;
 17javascript实现datagrid客户端checkbox列的全选,反选    }

 18javascript实现datagrid客户端checkbox列的全选,反选    else
 19javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
 20javascript实现datagrid客户端checkbox列的全选,反选        indexChkAll        = chkAll;
 21javascript实现datagrid客户端checkbox列的全选,反选    }

 22javascript实现datagrid客户端checkbox列的全选,反选    var objChkAll = document.getElementById(indexChkAll);
 23javascript实现datagrid客户端checkbox列的全选,反选    var tempObj;
 24javascript实现datagrid客户端checkbox列的全选,反选    for(var i=0;i<document.forms[0].elements.length;i++)
 25javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {    
 26javascript实现datagrid客户端checkbox列的全选,反选        tempObj = document.forms[0].elements[i];
 27javascript实现datagrid客户端checkbox列的全选,反选        if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
 28javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选        {
 29javascript实现datagrid客户端checkbox列的全选,反选            tempObj.checked = objChkAll.checked;
 30javascript实现datagrid客户端checkbox列的全选,反选        }

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

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

 33javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选/* 分页
 34javascript实现datagrid客户端checkbox列的全选,反选    参数说明:
 35javascript实现datagrid客户端checkbox列的全选,反选    prefix:前缀;chkAll:全选框;chkSingle:单选框ID
 36javascript实现datagrid客户端checkbox列的全选,反选    
 37javascript实现datagrid客户端checkbox列的全选,反选    使用方法:
 38javascript实现datagrid客户端checkbox列的全选,反选    if(e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
 39javascript实现datagrid客户端checkbox列的全选,反选    {
 40javascript实现datagrid客户端checkbox列的全选,反选        ((CheckBox)e.Item.Cells[1].FindControl("chkSingle")).Attributes.Add("onclick","CheckSingle('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
 41javascript实现datagrid客户端checkbox列的全选,反选    }
 42javascript实现datagrid客户端checkbox列的全选,反选*/

 43javascript实现datagrid客户端checkbox列的全选,反选function CheckSingle(prefix,chkAll,chkSingle)
 44javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选{
 45javascript实现datagrid客户端checkbox列的全选,反选    var indexChkAll;
 46javascript实现datagrid客户端checkbox列的全选,反选    if(prefix.length != 0)
 47javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
 48javascript实现datagrid客户端checkbox列的全选,反选        indexChkAll        = prefix + "__ctl2_" + chkAll;
 49javascript实现datagrid客户端checkbox列的全选,反选    }

 50javascript实现datagrid客户端checkbox列的全选,反选    else
 51javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
 52javascript实现datagrid客户端checkbox列的全选,反选        indexChkAll        = chkAll;
 53javascript实现datagrid客户端checkbox列的全选,反选    }

 54javascript实现datagrid客户端checkbox列的全选,反选    var objChkAll = document.getElementById(indexChkAll);
 55javascript实现datagrid客户端checkbox列的全选,反选    var tempObj;
 56javascript实现datagrid客户端checkbox列的全选,反选    var allCount    = 0;
 57javascript实现datagrid客户端checkbox列的全选,反选    var checkCount    = 0;
 58javascript实现datagrid客户端checkbox列的全选,反选    for(var i=0;i<document.forms[0].elements.length;i++)
 59javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {    
 60javascript实现datagrid客户端checkbox列的全选,反选        tempObj = document.forms[0].elements[i];
 61javascript实现datagrid客户端checkbox列的全选,反选        if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
 62javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选        {
 63javascript实现datagrid客户端checkbox列的全选,反选            if(tempObj.checked)
 64javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选            {
 65javascript实现datagrid客户端checkbox列的全选,反选                checkCount++;
 66javascript实现datagrid客户端checkbox列的全选,反选            }

 67javascript实现datagrid客户端checkbox列的全选,反选            else
 68javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选            {
 69javascript实现datagrid客户端checkbox列的全选,反选                objChkAll.checked = false;
 70javascript实现datagrid客户端checkbox列的全选,反选                //break;
 71javascript实现datagrid客户端checkbox列的全选,反选            }

 72javascript实现datagrid客户端checkbox列的全选,反选            allCount++;
 73javascript实现datagrid客户端checkbox列的全选,反选        }

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

 75javascript实现datagrid客户端checkbox列的全选,反选    if(checkCount != allCount)
 76javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
 77javascript实现datagrid客户端checkbox列的全选,反选        objChkAll.checked = false;
 78javascript实现datagrid客户端checkbox列的全选,反选    }

 79javascript实现datagrid客户端checkbox列的全选,反选    else
 80javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
 81javascript实现datagrid客户端checkbox列的全选,反选        if(allCount != 0)
 82javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选        {
 83javascript实现datagrid客户端checkbox列的全选,反选            objChkAll.checked = true;
 84javascript实现datagrid客户端checkbox列的全选,反选        }

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

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

 87javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选/*
 88javascript实现datagrid客户端checkbox列的全选,反选    参数说明:
 89javascript实现datagrid客户端checkbox列的全选,反选    prefix:前缀;chkAll:全选框;chkSingle:单选框ID
 90javascript实现datagrid客户端checkbox列的全选,反选    type:1【全选】,2【反选】,3【取消】
 91javascript实现datagrid客户端checkbox列的全选,反选    
 92javascript实现datagrid客户端checkbox列的全选,反选    使用方法:
 93javascript实现datagrid客户端checkbox列的全选,反选    this.btnSelectAll.Attributes.Add("onClick","CheckType('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle',1);");
 94javascript实现datagrid客户端checkbox列的全选,反选    this.btnUnSelectAll.Attributes.Add("onClick","CheckType('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle',2);");
 95javascript实现datagrid客户端checkbox列的全选,反选    this.btnCancelSelect.Attributes.Add("onClick","CheckType('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle',3);");
 96javascript实现datagrid客户端checkbox列的全选,反选*/

 97javascript实现datagrid客户端checkbox列的全选,反选function CheckType(prefix,chkAll,chkSingle,type)
 98javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选{
 99javascript实现datagrid客户端checkbox列的全选,反选    var indexChkAll;
100javascript实现datagrid客户端checkbox列的全选,反选    if(prefix.length != 0)
101javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
102javascript实现datagrid客户端checkbox列的全选,反选        indexChkAll        = prefix + "__ctl2_" + chkAll;
103javascript实现datagrid客户端checkbox列的全选,反选    }

104javascript实现datagrid客户端checkbox列的全选,反选    else
105javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
106javascript实现datagrid客户端checkbox列的全选,反选        indexChkAll        = chkAll;
107javascript实现datagrid客户端checkbox列的全选,反选    }

108javascript实现datagrid客户端checkbox列的全选,反选    var objChkAll = document.getElementById(indexChkAll);
109javascript实现datagrid客户端checkbox列的全选,反选    var tempObj;
110javascript实现datagrid客户端checkbox列的全选,反选    var allCount    = 0;
111javascript实现datagrid客户端checkbox列的全选,反选    var checkCount    = 0;
112javascript实现datagrid客户端checkbox列的全选,反选    for(var i=0;i<document.forms[0].elements.length;i++)
113javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {    
114javascript实现datagrid客户端checkbox列的全选,反选        tempObj = document.forms[0].elements[i];
115javascript实现datagrid客户端checkbox列的全选,反选        if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
116javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选        {
117javascript实现datagrid客户端checkbox列的全选,反选            switch(type)
118javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选            {
119javascript实现datagrid客户端checkbox列的全选,反选                case 1:
120javascript实现datagrid客户端checkbox列的全选,反选                    tempObj.checked = true;
121javascript实现datagrid客户端checkbox列的全选,反选                    break;
122javascript实现datagrid客户端checkbox列的全选,反选                case 2:
123javascript实现datagrid客户端checkbox列的全选,反选                    tempObj.checked = !tempObj.checked;
124javascript实现datagrid客户端checkbox列的全选,反选                    break;
125javascript实现datagrid客户端checkbox列的全选,反选                case 3:
126javascript实现datagrid客户端checkbox列的全选,反选                    tempObj.checked = false;
127javascript实现datagrid客户端checkbox列的全选,反选                    break;
128javascript实现datagrid客户端checkbox列的全选,反选            }

129javascript实现datagrid客户端checkbox列的全选,反选            if(tempObj.checked)
130javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选            {
131javascript实现datagrid客户端checkbox列的全选,反选                checkCount++;
132javascript实现datagrid客户端checkbox列的全选,反选            }

133javascript实现datagrid客户端checkbox列的全选,反选            allCount++;
134javascript实现datagrid客户端checkbox列的全选,反选        }

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

136javascript实现datagrid客户端checkbox列的全选,反选    if(checkCount != allCount)
137javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
138javascript实现datagrid客户端checkbox列的全选,反选        objChkAll.checked = false;
139javascript实现datagrid客户端checkbox列的全选,反选    }

140javascript实现datagrid客户端checkbox列的全选,反选    else
141javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
142javascript实现datagrid客户端checkbox列的全选,反选        if(allCount != 0)
143javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选        {
144javascript实现datagrid客户端checkbox列的全选,反选            objChkAll.checked = true;
145javascript实现datagrid客户端checkbox列的全选,反选        }

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

147javascript实现datagrid客户端checkbox列的全选,反选    window.event.returnValue = false;
148javascript实现datagrid客户端checkbox列的全选,反选    return false;
149javascript实现datagrid客户端checkbox列的全选,反选}

150javascript实现datagrid客户端checkbox列的全选,反选
151javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选/*
152javascript实现datagrid客户端checkbox列的全选,反选    参数说明:
153javascript实现datagrid客户端checkbox列的全选,反选    prefix:前缀;chkAll:全选框;chkSingle:单选框ID
154javascript实现datagrid客户端checkbox列的全选,反选
155javascript实现datagrid客户端checkbox列的全选,反选    使用方法:
156javascript实现datagrid客户端checkbox列的全选,反选    this.btnDelete.Attributes.Add("onClick","SubmitCheckBox('" + this.dg.ClientID.ToString() + "','chkAll','chkSingle');");
157javascript实现datagrid客户端checkbox列的全选,反选*/

158javascript实现datagrid客户端checkbox列的全选,反选function SubmitCheckBox(prefix,chkAll,chkSingle,msg)
159javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选{
160javascript实现datagrid客户端checkbox列的全选,反选    var indexChkAll;
161javascript实现datagrid客户端checkbox列的全选,反选    if(prefix.length != 0)
162javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
163javascript实现datagrid客户端checkbox列的全选,反选        indexChkAll        = prefix + "__ctl2_" + chkAll;
164javascript实现datagrid客户端checkbox列的全选,反选    }

165javascript实现datagrid客户端checkbox列的全选,反选    else
166javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
167javascript实现datagrid客户端checkbox列的全选,反选        indexChkAll        = chkAll;
168javascript实现datagrid客户端checkbox列的全选,反选    }

169javascript实现datagrid客户端checkbox列的全选,反选    var objChkAll = document.getElementById(indexChkAll);
170javascript实现datagrid客户端checkbox列的全选,反选    
171javascript实现datagrid客户端checkbox列的全选,反选    var tempObj;
172javascript实现datagrid客户端checkbox列的全选,反选    var allCount    = 0;
173javascript实现datagrid客户端checkbox列的全选,反选    var checkCount    = 0;
174javascript实现datagrid客户端checkbox列的全选,反选    for(var i=0;i<document.forms[0].elements.length;i++)
175javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {    
176javascript实现datagrid客户端checkbox列的全选,反选        tempObj = document.forms[0].elements[i];
177javascript实现datagrid客户端checkbox列的全选,反选        if(tempObj.type == "checkbox" && tempObj.id != indexChkAll && tempObj.id.indexOf(chkSingle) != -1)
178javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选        {
179javascript实现datagrid客户端checkbox列的全选,反选            if(tempObj.checked)
180javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选            {
181javascript实现datagrid客户端checkbox列的全选,反选                checkCount++;
182javascript实现datagrid客户端checkbox列的全选,反选            }

183javascript实现datagrid客户端checkbox列的全选,反选            allCount++;
184javascript实现datagrid客户端checkbox列的全选,反选        }

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

186javascript实现datagrid客户端checkbox列的全选,反选    if(allCount == 0//没有数据
187javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
188javascript实现datagrid客户端checkbox列的全选,反选        window.alert("当前没有" + msg + "可供删除javascript实现datagrid客户端checkbox列的全选,反选");
189javascript实现datagrid客户端checkbox列的全选,反选        window.event.returnValue = false;
190javascript实现datagrid客户端checkbox列的全选,反选        return false;
191javascript实现datagrid客户端checkbox列的全选,反选    }

192javascript实现datagrid客户端checkbox列的全选,反选    else
193javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选    {
194javascript实现datagrid客户端checkbox列的全选,反选        if(checkCount == 0)
195javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选        {
196javascript实现datagrid客户端checkbox列的全选,反选            window.alert("没有选中要删除的" + msg + "javascript实现datagrid客户端checkbox列的全选,反选");
197javascript实现datagrid客户端checkbox列的全选,反选            window.event.returnValue = false;
198javascript实现datagrid客户端checkbox列的全选,反选            return false;
199javascript实现datagrid客户端checkbox列的全选,反选        }

200javascript实现datagrid客户端checkbox列的全选,反选        else
201javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选        {
202javascript实现datagrid客户端checkbox列的全选,反选            //if(window.confirm("确定要删除当前选中的【" + checkCount.toString() + "】项吗?") == false)
203javascript实现datagrid客户端checkbox列的全选,反选            if(window.confirm("确定要删除当前选中的" + msg + "吗?"== false)
204javascript实现datagrid客户端checkbox列的全选,反选javascript实现datagrid客户端checkbox列的全选,反选            {
205javascript实现datagrid客户端checkbox列的全选,反选                window.event.returnValue = false;
206javascript实现datagrid客户端checkbox列的全选,反选                return false;
207javascript实现datagrid客户端checkbox列的全选,反选            }

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

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

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