我在gridview中有两列复选框，其中标题还包含一个复选框。 如果我选择标题复选框，它将检查其colomn中的所有相应复选框。 现在，我想要发生的是，如果我选择第1列复选框，第2列复选框应该取消选中，反之亦然。我的代码如下所示，我们将不胜感激：
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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 id="Head1" runat="server">
<title></title>
<style type="text/css">
#form1
{
height: 138px;
width: 509px;
}
</style>
<script type="text/javascript" >
function SelectAll(id)
{
// alert(id);
// GridView_ctl01_cbSelectAll
//get reference of GridView control
var cell;
var cellnext;
if(id =='GridView_ctl01_cbSelectAll')
{
var grid = document.getElementById("<%= GridView.ClientID %>");
//variable to contain the cell of the grid
if (grid.rows.length > 0)
{
//loop starts from 1. rows[0] points to the header.
for (i=1; i<grid.rows.length; i++)
{
//get the reference of first column
cell = grid.rows[i].cells[1];
//loop according to the number of childNodes in the cell
for (j=0; j<cell.childNodes.length; j++)
{
//if childNode type is CheckBox
if (cell.childNodes[j].type =="checkbox")
{
//assign the status of the Select All checkbox to the cell checkbox within the
cell.childNodes[j].checked = document.getElementById(id).checked;
}
}
}
}
}
else
{
//alert("yes");
var grid = document.getElementById("<%= GridView.ClientID %>");
//variable to contain the cell of the grid
if (grid.rows.length > 0)
{
//loop starts from 1. rows[0] points to the header.
for (i=1; i<grid.rows.length; i++)
{
//get the reference of first column
cellnext = grid.rows[i].cells[2];
//loop according to the number of childNodes in the cell
for (j=0; j<cellnext.childNodes.length; j++)
{
//if childNode type is CheckBox
if (cellnext.childNodes[j].type =="checkbox")
{
//assign the status of the Select All checkbox to the cell checkbox within the grid
cellnext.childNodes[j].checked = document.getElementById(id).checked;
}
}
}
}
}
}
</script>
</head>
<body>
<form runat ="server" id="form1">
<asp:GridView ID="GridView" runat="server" BorderWidth="1px" AutoGenerateColumns="False"
Width="100%" Visible="True" AutoGenerateEditButton="False" GridLines="none" ShowHeader="true"
SelectedRowStyle-Wrap="false">
<Columns>
<asp:TemplateField>
<ItemStyle Width="20%" />
<HeaderStyle HorizontalAlign="Left" />
<HeaderTemplate>
<strong>Name</strong>
</HeaderTemplate>
<ItemTemplate>
<asp:Label runat="server" class="ms-vb" ID="lblemployees" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemStyle Width="35%" />
<HeaderStyle HorizontalAlign="Left" />
<HeaderTemplate>
<strong>
<asp:CheckBox ID="cbSelectAll" runat="server" onclick="return SelectAll(this.id);" AutoPostBack="false" />
Sleep (6 Hours)
</strong>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="cbSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemStyle Width="50%" />
<HeaderStyle HorizontalAlign="Left" />
<HeaderTemplate>
<strong>
<asp:CheckBox ID="cbSelectAll1" runat="server" onclick="return SelectAll(this.id);" AutoPostBack="false" />
Wake
</strong>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="cbSelect1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
<p>
</p>
</body>
</html>
其源代码是：
Imports System.Data
Imports System.Data.SqlClient
Partial Public Class _Default
Inherits System.Web.UI.Page
Dim sqlconn As SqlConnection
Dim sqlCmd As SqlCommand
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim strsql As String
Dim s As String = "whatever it may be "
sqlconn = New SqlConnection(s)
Dim sqlCmd As New SqlCommand()
Dim sqlAdp As SqlDataAdapter
sqlconn.Open()
strsql = "select name from tab_name"
sqlCmd.Connection = sqlconn
sqlCmd.CommandText = strsql
sqlAdp = New SqlDataAdapter()
sqlAdp.SelectCommand = sqlCmd
Dim DS As New DataSet()
sqlAdp.Fill(DS, "Return")
Dim dt As New DataTable()
dt = DS.Tables(0)
sqlCmd.Dispose()
sqlconn.Close()
GridView.DataSource = dt
GridView.DataBind()
End Sub
'Protected Sub GridView_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView.RowDataBound
' If e.Row.RowType = DataControlRowType.Header Then
' 'Find the checkbox control in header and add an attribute
' DirectCast(e.Row.FindControl("cbSelectAll"), CheckBox).Attributes.Add("onclick", "javascript:SelectAll('" + DirectCast(e.Row.FindControl("cbSelectAll"), CheckBox).ClientID & "')")
' End If
'End Sub
End Class
答案 0 :(得分：1)
这是我为此提出的解决方案：
function SelectAll(id)
{
//get reference of GridView control
var grid = document.getElementById("<%= GridView.ClientID %>");
if (grid.rows.length > 0)
{
var onIndex;
var offIndex;
// First, assume that the item is checked
if (id == 'GridView_ctl01_cbSelectAll') {
// Assuming col1 is checked, set the onindex to 1 and of to 2
onIndex = 1;
offIndex = 2;
} else {
onIndex = 2;
offIndex = 1;
}
// If the column is not checked, swap the indexes.
if (!document.getElementById(id).checked) {
var tempIndex;
tempIndex = onIndex;
onIndex = offIndex;
offIndex = tempindex;
}
// loop starts from 1. rows[0] points to the header.
for (var i = 1; i < grid.rows.length; i++) {
var row = grid.rows[i];
SetCellCheckBox(row.cells[onIndex], true);
SetCellCheckBox(row.cells[offIndex], false);
}
}
function SetCellCheckBox(cell, value) {
// loop according to the number of childNodes in the cell
for (var j = 0; j < cell.childNodes.length; j++) {
//if childNode type is CheckBox
if (cell.childNodes[j].type == "checkbox") {
//assign the status of the Select All checkbox to the cell checkbox within the
cell.childNodes[j].checked = value;
// Bail once we have found the checkbox
return;
}
}
}
}
答案 1 :(得分：0)
这可能对你有所帮助。我用jQuery解决了它。您可以在此处下载图书馆：http://docs.jquery.com/Downloading_jQuery
这是我的建议：
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<asp:GridView ID="gvTest" runat="server" Width="100%">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" onclick="CheckAll(this,0);" />
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" class="dummychkstyle" id="chkSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll2" runat="server" onclick="CheckAll(this,1);" />
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" class="dummychkstyle2" id="chkSelect2" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<script language="javascript" type="text/javascript">
function CheckAll(selectChk, index) {
if (index == 0) {
CheckCheckboxes(".dummychkstyle", ".dummychkstyle2", $(selectChk).attr('checked'));
}
else {
CheckCheckboxes(".dummychkstyle2", ".dummychkstyle", $(selectChk).attr('checked'));
}
}
function CheckCheckboxes(column1Class, column2Class, checked) {
if (checked) {
$(column1Class).attr('checked', true);
$(column2Class).attr('checked', false);
}
else {
$(column1Class).attr('checked', false);
$(column2Class).attr('checked', true);
}
}
</script>