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

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

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

我将展示一些示例，其中复选框选择和取消选择将无任何问题。以下是客户端功能。

$(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 3

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

frm.elements[i].checked=true;

将遍历表单的所有元素，这包括radiobuttions并且它将“检查”它们。

你需要像

这样的东西

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>

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

4 个答案: