关于GridView的全选与反选的问题

Nihn 2008-04-14 04:04:15
大家好！
我现在碰到一个问题，GirdView中，我加入了CheckBox，并且在标题行中实现全选与反选。再参考了网上的一些代码后，基本实现了，但是发现一个问题：当我选中标题行的CheckBox后，内容行都选中，此时，我在内容行中，取消了一个，此时标题行中的“勾”应该自动取消；同样，当我将内容行中所有的CheckBox都选中后，标题行的CheckBox也应该自动选中。
请问大家，这个该怎么做。谢谢！
...全文
180 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
Nihn 2008-04-16
  • 打赏
  • 举报
 回复
谢谢大家！
6楼的代码我试过，确实没有那种效果。
Go 旅城通票 2008-04-15
  • 打赏
  • 举报
 回复
6楼不就满足了,你看了没
lray 2008-04-15
  • 打赏
  • 举报
 回复
function AllCheck(boolvalue,checkBoxName)
{
if(document.getElementsByName(checkBoxName).length>1)
{
for(var i=0;i<document.getElementsByName(checkBoxName).length;i++)
{
document.getElementsByName(checkBoxName)[i].checked = boolvalue;
}
}
else
{
document.getElementById(checkBoxName).checked = boolvalue;
}
}

function SingleCheck(getBox)
{
if(getBox.checked && IscheckedAll(getBox.id))
{
document.getElementById("CheckedAll").checked=true;
}
else
{
document.getElementById("CheckedAll").checked=false;
}
}

function IscheckedAll(checkBoxName)
{
checkedAll=true;
try
{
for(i=0;i<document.getElementsByName(checkBoxName).length;i++)
{
if(!document.getElementsByName(checkBoxName)[i].checked)
{
checkedAll=false;
break;
}
}
}
catch(e)
{
checkedAll=document.getElementById(checkBoxName).checked
}
return checkedAll;
}

全选的checkBox加相应事件AllCheck
单选的checkBox加相应事件SingleCheck

hb9191 2008-04-15
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 sahalasahara 的回复:]
谢谢大家！
问题基本解决了。
现在全选之后，随便取消一个，表头的全选框也就自动取消了。不过还有一个小问题，就是手动选中了所有的CheckBox，表头的全选框不会自动选中。希望大家能再讨论一下。
[/Quote]
每选一次遍历一遍，如果已经全选了，全选框打钩
Nihn 2008-04-15
  • 打赏
  • 举报
 回复
谢谢大家！
问题基本解决了。
现在全选之后，随便取消一个，表头的全选框也就自动取消了。不过还有一个小问题，就是手动选中了所有的CheckBox，表头的全选框不会自动选中。希望大家能再讨论一下。
dangnilaoqu 2008-04-15
  • 打赏
  • 举报
 回复
不错，学习了。
oec2003 2008-04-14
  • 打赏
  • 举报
 回复 




<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="CheckBox.WebForm2" %>



<!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>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">

            <Columns>

                <asp:TemplateField>

                    <HeaderTemplate>

                        <input type="checkbox"  onclick="selectAll(this)" id="header"/>

                    </HeaderTemplate>

                    <ItemTemplate>

                        <input  type="checkbox" onclick="selectHeader()"/>

                    </ItemTemplate>

                

                </asp:TemplateField>

                <asp:BoundField DataField="No" HeaderText="No" SortExpression="No" />

                <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />

                

            </Columns>

        </asp:GridView>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NHibernateConnectionString %>"

            SelectCommand="SELECT * FROM [Table1]"></asp:SqlDataSource>

    </div>

    

    <script type="text/javascript">

    function selectAll(obj)

    {

         var state;

         if(obj.checked==true)

            state = true;

         else

            state = false;



        var inputs=document.getElementById("GridView1").getElementsByTagName("input");

        for(var i=1;i<inputs.length;i++)

        {

            if(inputs[i].type="checkbox")

            {

                inputs[i].checked=state;

            }

        }

    }

   

    

    function selectHeader()

    {

        var state=true;

        var inputs=document.getElementById("GridView1").getElementsByTagName("input");

        var header=document.getElementById("header");

        for(var i=0;i<inputs.length;i++)

        {

            if(inputs[i].type=="checkbox" && inputs[i].id!="header" && !inputs[i].checked)

            {

                state=false;

                break;

            }

        }

        header.checked=state;

    }

    </script>

    </form>

</body>

</html>
oyjd614 2008-04-14
  • 打赏
  • 举报
 回复
<%@ Page Language="C#" %>
<script runat="server">
void categoryView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox chkBox = (CheckBox)e.Row.FindControl("chkSelect");
string script = " function HighlightSelected(selectedCheckbox, RowState){ " +
"if (selectedCheckbox.checked) selectedCheckbox."+
"parentElement.parentElement.style.backgroundColor='#FFAA63';"+
"else { if (RowState=='0') selectedCheckbox.parentElement."+
"parentElement.style.backgroundColor='white'; "+
"else selectedCheckbox.parentElement.parentElement."+
"style.backgroundColor='#D6E3F7'; } }";
Page.ClientScript.RegisterStartupScript(this.GetType(),
"RowDataBoundScript", script, true);
chkBox.Attributes.Add("onclick", "HighlightSelected(this,'" + Convert.ToString(e.Row.RowState) + "' );") ;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Selecting check boxes within a GridView control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SqlDataSource ID="categorySource" runat="server"
ProviderName="System.Data.SqlClient"
ConnectionString="<%$ ConnectionStrings:AdventureWorks %>"
SelectCommand="Select ProductSubcategoryID, Name from Production.ProductSubcategory order by ProductSubcategoryID">
</asp:SqlDataSource>
<asp:GridView ID="categoryView" runat="server" DataSourceID="categorySource" AutoGenerateColumns="false"
OnRowDataBound="categoryView_RowDataBound" HeaderStyle-HorizontalAlign="Center"
HeaderStyle-Font-Bold="True" HeaderStyle-BackColor="blue"
HeaderStyle-ForeColor="White" AllowPaging="true">
<RowStyle BackColor="White" ForeColor="#333333" />
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server"/>
<asp:Label ID="lblCategoryID" runat="server" Text='<%# Eval("ProductSubcategoryID") %>'
Visible="false"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Category ID">
<ItemTemplate>
<br/><b><%# Eval("ProductSubcategoryID") %></b></br>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemStyle VerticalAlign="Top"/>
<ItemTemplate>
<br/><br/><b><%# Eval("Name") %></b><br/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Go 旅城通票 2008-04-14
  • 打赏
  • 举报
 回复 
<script>

function IsSelectAll()

{

  var IsAll=true;

  var cbs=document.getElementById("MyTB").getElementsByTagName("input");

  var selAll=document.getElementById("selALL");

  for(var i=0;i<cbs.length;i++)

  {

    if(cbs[i].type=="checkbox"&&cbs[i].id!="selALL"&&!cbs[i].checked)

    {

      IsAll=false;

      break;

    }

  }

  selAll.checked=IsAll;

}

function SelAll()

{

  var cbs=document.getElementById("MyTB").getElementsByTagName("input");

  var selAll=document.getElementById("selALL").checked;

  for(var i=0;i<cbs.length;i++)

  {

    if(cbs[i].type=="checkbox"&&cbs[i].id!="selALL")

      cbs[i].checked=selAll;

  }

}

</script>

<table border='1' id="MyTB"><!----MyTB就是你gridview的id----->

<tr><td><input type="checkbox" id="selALL" onclick="SelAll()"/>全选</td></tr>

<tr><td><input type="checkbox" onclick="IsSelectAll()" />1</td></tr>

<tr><td><input type="checkbox" onclick="IsSelectAll()"/>2</td></tr>

<tr><td><input type="checkbox" onclick="IsSelectAll()"/>3</td></tr>

<tr><td><input type="checkbox" onclick="IsSelectAll()"/>4</td></tr>

<tr><td><input type="checkbox" onclick="IsSelectAll()"/>5</td></tr>

<tr><td><input type="checkbox" onclick="IsSelectAll()"/>6</td></tr>

</table>
wolf_410 2008-04-14
  • 打赏
  • 举报
 回复
可以实现，不过讲起来麻烦，建议你把生成以后的页面的html源码开一下就知道了，gridview里面的checkbox 的id是有规则的，按这个规则去判断就不难实现。
apollolb2005 2008-04-14
  • 打赏
  • 举报
 回复
麻烦LZ 把现有的代码发一下，好直接修改。做个环境太麻烦....
wolf_410 2008-04-14
  • 打赏
  • 举报
 回复
你要做成服务器端还是客户机端的。
sadan2121 2008-04-14
  • 打赏
  • 举报
 回复
关注
叶子 2008-04-14
  • 打赏
  • 举报
 回复
这个问题好，关注一下。
GridView全选/反选示例 用checkbox
GridView全选/反选示例 用checkbox 数据库为SqlServer 可修改数据源 web方式
listView,Gridview全选反选关联及删除操作
listView,Gridview全选删除和反选关联及删除操作
GridView全选_反选示例源码
GridView全选_反选示例源码! 很值得下载看看!资源免费,大家分享!!
商业编程-源码-GridView全选反选示例源码.zip
商业编程-源码-GridView全选反选示例源码.zip
GridView实现多选,全选,反选功能
GridView实现多选,全选,反选功能
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章