javascript - GridView 中的复选框标题出现问题

Question

我的网络表单上有 2 个单选按钮，即 Radio1 和 Radio2。基于这些选择，我将显示一个带有复选框选择的GridView以及一些数据。这个GridView有一个标题复选框，通过它我可以选择gridview中可用的所有复选框。但选择此选项后，单选按钮选择也会发生变化。意味着如果我最初选择了 Radio1 并且如果我单击可用作标题的复选框，则单选按钮选择将切换到 Radio2为什么会发生这种情况？告诉。

我用来选择复选框的脚本

<script type="text/javascript">
function check_uncheck (Val)
{
var ValChecked = Val.checked;
var ValId =Val.id;
var frm = document.forms[0];
// Loop through all elements
for (i=0; i<frm.length; i++)
{
// Look for Header Template's Checkbox
if (this!=null)
{ if (ValId.indexOf ('CheckAll') != -1)
{
// Check if main checkbox is checked, then select or deselect datagrid checkboxes
if(ValChecked) frm.elements[i].checked = true;
else frm.elements[i].checked = false;
}
else if (ValId.indexOf ('checkRec') != -1)
{
// Check if any of the checkboxes are not checked, and then uncheck top select all checkbox
if(frm.elements[i].checked == false) frm.elements[1].checked = false;
}
}
}
}
</script>

我的 GridView 设计

<asp:GridView ID="grdPayroll" runat="server" HeaderStyle-BackColor="green" AutoGenerateColumns="False"
                CssClass="grid_cen" Font-Names="Arial" Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B"
                CellPadding="4" CellSpacing="10" ForeColor="Black" GridLines="Vertical" PageSize="5"
                Visible="False" BackColor="Black" BorderColor="#d3d4d3" BorderStyle="None" BorderWidth="1px">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                           <asp:CheckBox ID="checkRec" runat="server" onclick="return check_uncheck (this );" />
                        </ItemTemplate>
                        <HeaderTemplate>
                           <asp:CheckBox ID="CheckAll" runat="server" onclick="return check_uncheck (this );" />


                        </HeaderTemplate>
                    </asp:TemplateField>
                    <%--<asp:TemplateField>
                    <ItemTemplate>
                        <asp:RadioButton ID="rdbtnPayroll" runat="server" onclick="RadioCheck(this);" />
                    </ItemTemplate>
<<<<<<< .mine
                </asp:TemplateField>--%>
                    <asp:BoundField DataField="EmpID" HeaderText="Employee ID">
                        <ItemStyle Width="100px" />
                    </asp:BoundField>
                    <asp:BoundField DataField="empname" HeaderText="Employee Name">
                        <ItemStyle Width="100px" />
                    </asp:BoundField>
                    <asp:BoundField DataField="PayPeriodNumber" HeaderText="PayPeriod Number">
                        <ItemStyle Width="100px" />
                    </asp:BoundField>
                    <asp:BoundField DataField="PayRollYear" HeaderText="Payroll Year">
                        <ItemStyle Width="100px" />
                    </asp:BoundField>
                    <asp:BoundField DataField="PaymentDate" HeaderText="Payment Date">
                        <ItemStyle Width="100px" />
                    </asp:BoundField>
                </Columns>
                <HeaderStyle BackColor="#d6dee7" Font-Bold="True" ForeColor="black" Font-Size="smaller" />
                <AlternatingRowStyle BackColor="White" />
                <EmptyDataTemplate>
                    <h1>
                        No Data Found</h1>
                </EmptyDataTemplate>
                <RowStyle BackColor="#e7eff7" Font-Size="XX-Small" CssClass="text_center" />
                <FooterStyle BackColor="#CCCC99" />
                <PagerStyle BackColor="#e7eff7" ForeColor="Black" HorizontalAlign="Right" Font-Size="XX-Small" />
                <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
            </asp:GridView>

我的单选按钮

 <asp:RadioButton ID="rdbtnsimulation" Text="Simulation" runat="server" AutoPostBack="True"
                    GroupName="Run" OnCheckedChanged="rdbtnsimulation_CheckedChanged" />
                <asp:RadioButton ID="rdbtnlive" Text="live" runat="server" AutoPostBack="True" GroupName="Run"
                    OnCheckedChanged="rdbtnlive_CheckedChanged" />

Answer 1

我将展示一些示例，其中复选框选择和取消选择将毫无问题地工作。 以下是相同的客户端函数。

$(document).ready(function() {
        initiateCheckAllBinding();
    });



function initiateCheckAllBinding() {
        var headerCheckBox = $("input[id$='headercheck']");
        var rowCheckBox = $("#listview input[id*='chkitem']");

        headerCheckBox.click(function(e) {
            rowCheckBox.attr('checked', headerCheckBox.is(':checked'));
        });
        // To select CheckAll when all Item CheckBox is selected and
        // to deselect CheckAll when an Item CheckBox is deselected.
        rowCheckBox.click(function(e) {
            var rowCheckBoxSelected = $("#listview input[id*='chkitem']:checked");
            headerCheckBox.attr("checked", function() {
                if (rowCheckBox.length == rowCheckBoxSelected.length)
                    return true;
                else return false;
            });

        });

    }

其中“listview”是gridview的id。 “headercheck”是 Gridview 标题中复选框的 id。 “chkitem”是Itemtemplate和alternateitemtemplate中复选框的id。