利用JavaScript使gridview中的checkbox被全部选中

最新推荐文章于 2019-06-24 16:28:23 发布

R芮R

最新推荐文章于 2019-06-24 16:28:23 发布

阅读量91

点赞数

原文链接：http://www.cnblogs.com/lhuser/articles/1467227.html

版权

楼主有没有发现,例如ID为GridView1的数据表在用VS运行后变成HTML码后,
所有模板列中 runat="server"的CheckBox都被自动添加了Name和ID,但是这些ID和NAME是有规律的,例如. GridView1里的<ItemTemplate><asp:CheckBox ID="CheckBox1" runat="server" autopostback="false />,生成HTML后你可以看到,CheckBox1的ID变成了 GridView1_ctl02_CheckBox1(索引从02开始的,固定规律),然后03,04........所以可以用我下面的土方法来全选..假设你的GridView的ID是GridView1

function grcheckalll(obj)
{
var rowcount=document.getElementById("GridView1").rows.length;
for(var a=2;a<=rowcount+1;a++)
{
if(a>=10)
{var ckid="GridView1_ctl&_CheckBox1";
}
else
{var ckid="GridView1_ctl0&_CheckBox1";}
var aa=ckid.replace("&",a);
var bb=document.getElementById(aa);
if(bb!=null)
{
bb.checked=obj;
}
}
}
<TemplateField>
<headerTemplate>
<input type=checkbox value="" οnclick="grcheckalll(this.checked)" title="全选">
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server">
</ItemTemplate>

其他回答共 4 条

回答者： meteortent - 试用期一级

10-27 22:39

1楼的差不多吧

回答者： xucheng_1 - 见习魔法师三级

10-27 23:01

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
function CheckAll()
{
var selects= document.getElementsByName("ContentIDs");
for(var i=0;i<selects.length;i++){
if(!selects[i].checked){
selects[i].click();
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<nobr><a href="javascript:CheckAll();">全选</a></nobr>
</HeaderTemplate>
<ItemTemplate>
<input id="CheckboxSelect<%# Eval("r1") %>" type="checkbox" name="ContentIDs" value="<%# Eval("r2") %>" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle Width="5%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="标题" HeaderStyle-HorizontalAlign="Left">
<ItemTemplate>
<a οnclick="event.cancelBubble=true;" href="View.aspx?ContentID=<%# Eval("r1") %>" target="_blank" title="<%# Eval("r2") %>"><%# Eval("r2")%></a>
</ItemTemplate>
<HeaderStyle Width="55%" />
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="PagePanel" />
<PagerSettings Mode="NumericFirstLast" />
</asp:GridView>
</div>

</form>
</body>
</html>

回答者： zhaochunyu0104 - 经理四级

10-27 23:25

// 判断多选是否与选中项（没有选中的返回false）
function slcNo_click()
{
if (document.form1.checkboxname.length)
{
for (var i=0;i<document.form1.checkboxname.length;i++)
{
if(document.form1.checkboxname[i].checked)
{
return true;
}
}
}
else
{
if(document.form1.checkboxname.checked)
{
return true;
}
}
alert("请选择后再操作！");
return false;
}
// 多选的全选与取消
function checkJs(boolvalue)
{
if(document.all.checkboxname.length>1)
{
for(var i=0;i<document.all.checkboxname.length;i++)
{
document.all.checkboxname[i].checked = boolvalue;
}
}
else
document.all.checkboxname.checked = boolvalue;
}
//

// 只有全部选中时“全选”选中
function SingleCheckJs()
{
var flag1=false;
var flag2=false;

if (document.form1.checkboxname.length)
{
for (var i=0;i<document.form1.checkboxname.length;i++)
{
if(document.form1.checkboxname[i].checked)
flag1 = true;
else
flag2 = true;
}
}
else
{
if(document.form1.checkboxname.checked)
flag1 = true;
else
flag2 = true;
}

if(flag1==true&&flag2==false)
document.getElementById("chk").checked = true;
else
document.getElementById("chk").checked = false;
}
<asp:TemplateField HeaderText="<input type='checkbox' id='chk' name='chk' οnclick='checkJs(this.checked);' />全选" FooterText="全选">
<ItemTemplate>
<input type="checkbox" id="checkboxname" name="checkboxname" value='<%# DataBinder.Eval(Container.DataItem, "id")%>' οnclick='SingleCheckJs();' />
</ItemTemplate>
</asp:TemplateField>

回答者： fgh0302 - 秀才三级

10-28 08:22

转载于:https://www.cnblogs.com/lhuser/articles/1467227.html