网格视图中的复选框标题问题

Question

我的网络表单上有 2 个单选按钮，即 Radio1 和 Radio2。基于这些选择，我将显示GridView 和Check box 选择以及一些数据。这个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>

我的网格视图设计

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

Answer 2

您需要开发以下类型的脚本来达到目的，因为它正在获取表单的所有元素

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

或许能帮到你。相反，我建议使用 jQuery。 :-)

Answer 3

没有 javascript 专家，但我认为您的 javascript：

frm.elements[i].checked=true;

将遍历表单的所有元素，这包括单选按钮，它会“检查”它们。

你需要类似的东西

frm.checkRec[i].checked=true;

“检查”网格中的所有复选框（仅这些复选框）

Answer 4

 <script type="text/javascript">
 function check_uncheck (Val)
 {
 var ValChecked = Val.checked;

 var gridview = document.getElementById('<%=grdPayroll.ClientID %>');

 //Now get the all the Input type elements
 var AllInputsElements = gridview.getElementsByTagName('input');
 var TotalInputs = AllInputsElements.length;
 //Now we have to find the checkboxes in the rows.
 for(var i=0;i< TotalInputs ; i++ )
 {
 if(AllInputsElements[i].type=='checkbox')
 {
 AllInputsElements[i].checked=ValChecked;
 }
 }
 }
 </script>  


 <asp:TemplateField>
 <ItemTemplate>
 <asp:CheckBox ID="checkRec" runat="server"  />
 </ItemTemplate>
 <HeaderTemplate>
 <asp:CheckBox ID="CheckAll" runat="server" onclick="check_uncheck (this);" />
 </HeaderTemplate>
 </asp:TemplateField>