AspxGridView中checkbox全选的JS代码代码,Asp.Net代码库,德仔网

代码语言
代码分类
【Asp.Net】 AspxGridView中checkbox全选的JS代码
作者:Dezai.CN / 发布于2012/6/18/ 1714
AspxGridView中checkbox全选的JS代码
<div>
前台:
<dx:ASPxGridView ID="grvGroup"  runat="server"  Width="100%"
AutoGenerateColumns="False"  ClientIDMode="AutoID" 
KeyFieldName="GroupID"  >
<Columns>
<dx:GridViewDataColumn VisibleIndex="1" Caption="修改" Width="100px">
<HeaderTemplate>
<input type="checkbox" runat="server" 
id="selectAllChange"  onclick="clall(this)"  value="修改" /> 修改                       
</HeaderTemplate>
<DataItemTemplate>
<input type="checkbox" runat="server" checked='<%# Convert.ToBoolean(Eval("Change")) %>'
id="Change"  onclick="clk(this)"  />
</DataItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
<CellStyle HorizontalAlign="Center">
</CellStyle>
</dx:GridViewDataColumn>
<dx:GridViewDataColumn VisibleIndex="2" Caption="只读" Width="100px">
<HeaderTemplate>  
<input type="checkbox" runat="server" 
id="selectAllReadOnly"  onclick="clall(this)"  value="只读" />只读                       
</HeaderTemplate>
<DataItemTemplate>
<input type="checkbox" runat="server" checked='<%# Convert.ToBoolean(Eval("ReadOnly")) %>'
id="ReadOnly"  onclick="clk1(this)"  />
</DataItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
<CellStyle HorizontalAlign="Center">
</CellStyle>
</dx:GridViewDataColumn>
</Columns>
</dx:ASPxGridView>
JS代码:
clk 为当修改项选中时,只读项去掉
clk1为当只读项选中时,修改项去掉,两者可合二为一;
clall为全选,并且选择修改时,所有的只读去掉,选只读时,所有全选去掉
function clk(obj) {
var arr = obj.id;
var arrlist = arr.split("_");
var Red = parseInt(arrlist[2]) + 1;
var ReadCkd=document.getElementById(arrlist[0] + "_" + arrlist[1] + "_" + Red + "_ReadOnly");
if (document.getElementById(arr).checked) {
ReadCkd.checked = false;
}
}
function clk1(obj) {
var arr = obj.id;
var arrlist = arr.split("_");
var Cha = parseInt(arrlist[2])- 1;
var ChangeCkd = document.getElementById(arrlist[0] + "_" + arrlist[1] + "_" + Cha + "_Change");
if (document.getElementById(arr).checked) {
ChangeCkd.checked = false;
}
}
function clall(obj) {
var arr = obj.id;
var arrlist = arr.split("_");
var Cha = arrlist[2];
var list = document.getElementById("grvGroupSet").getElementsByTagName("INPUT");
for (var i = 0; i < list.length; i++)
{
if (Cha == "selectAllChange")
{
if (list[i].id.indexOf("Change") > -1) 
{
if (document.getElementById(obj.id).checked == true) 
{
list[i].checked = true;
}
else 
{
list[i].checked = false;
}
}
if (list[i].id.indexOf("ReadOnly") > -1)
{
if (document.getElementById(obj.id).checked == true) 
{
list[i].checked = false;
}
}
}
if (Cha == "selectAllReadOnly") 
{
if (list[i].id.indexOf("ReadOnly") > -1)
{
if (document.getElementById(obj.id).checked == true) 
{
list[i].checked = true;
}
else 
{
list[i].checked = false;
}
}
if (list[i].id.indexOf("Change") > -1) 
{
if (document.getElementById(obj.id).checked == true) 
{
list[i].checked = false;
}                     
}
}
}
}
后为方便使用,把全选与清除摘取出来,单独使用,其中id参数为AspxGridView的ID,其中checkboxID为"Change"
//全选
function clall( id) {
var list = document.getElementById(id).getElementsByTagName("INPUT");
for (var i = 0; i < list.length; i++) 
{
if (list[i].id.indexOf("Change") > -1)
{
list[i].checked = true;
}
}
}
//全部清除
function clearall(id) {
var list = document.getElementById(id).getElementsByTagName("INPUT");
for (var i = 0; i < list.length; i++) {
if (list[i].id.indexOf("Change") > -1) {
list[i].checked = false;
}
}
}
</div>
试试其它关键字
　checkbox全选　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)