Problem with Check box Header in Grid view

I am having 2 radio buttons on my web form namely Radio1 and Radio2. Based on these selection i will show a GridView with Check box selection along with some data. This GridView has a header check box through which i can select all check boxes available in gridview. But on selecting this the Radio button selection is also getting changed. Means if i have my Radio1 as selected initially and if i click on check box which is available as header the radio button selection is switched to Radio2Why this is happening can any one tell.

Script i used for selecting check boxes

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

My grid view design

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

My Radio buttons

 <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" />

I'll show some example where the check box selection and deselection will work without any issues. Following the is client side function for the same.

$(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;
            });

        });

    }

Where the "listview" is the the id of the gridview. "headercheck" is the id of the check box in Gridview header. "chkitem" is the id of the check box in Itemtemplate and alternateitemtemplate.

You need to develop, below kind of script to serve the purpose, as it is getting all the elements of the Form

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

Might help you. Rather I would suggest of using jQuery. :-)

no javascript expert but i think that your javascript:

frm.elements[i].checked=true;

will loop over all elements of the form, this includes the radiobuttions and it'll "check" them.

you'll need something like

frm.checkRec[i].checked=true;

to 'check' all checkboxes in the grid (and only these)

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