How to Uncheck Select All Checkbox when one checkbox is Unchecked

Question

I have a checkbox named Select All. When I click this then all other check box inside my Gridview is Checked. But I want when anyone of the checkbox inside the grid will be unchecked then this Select All Checkbox will automatically uncheck. Is there anyone who can help me on this Please?

Thank you.

Solution 1

function SelectheaderCheckboxes(headerchk) {
debugger
var gvcheck = document.getElementById('gvdetails');
var i;
//Condition to check header checkbox selected or not if that is true checked all checkboxes
if (headerchk.checked) {
for (i = 0; i < gvcheck.rows.length; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
inputs[0].checked = true;
}
}
//if condition fails uncheck all checkboxes in gridview
else {
for (i = 0; i < gvcheck.rows.length; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
inputs[0].checked = false;
}
}
}

<asp:GridView ID="gvdetails" runat="server" DataSourceID="dsdetails" onrowdatabound="gvdetails_RowDataBound" >
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkheader" runat="server" onclick="javascript:SelectheaderCheckboxes(this)" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkchild" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

Solution 2

You can do this on the client or the server side

Client side using javascript/jquery

As the checkboxes are added dynamically you will need to use the on method to bind the checkboxes to the function and fire it when their state changes.

$(document).ready(function() {
    $(".checkbox").on("change", function() {
         if(!$(this).is(":checked")){
             $(".selectAll").prop('checked', false);
         }
    });
});

Here is a jsFiddle with a full functioning select All that will:

• Select All / Deselect All
• Untick Select All when one of the checkboxes is unticked
• Tick select All when all checkboxes are ticked

Server side

use an event handler to on a postback(ajax) when a checkbox is unticked and loop through all checkboxes and untick them

Font-end uses ajax to do a partial postback to update the gridview. the select all checkbox and gridview checkboxes will trigger the postback.

<asp:UpdatePanel  runat="server">
    <ContentTemplate>
        <asp:GridView ID="gvCheckBoxes" runat="server">
            <Columns>
                <asp:TemplateField >
                    <ItemTemplate>
                        <asp:CheckBox ID="cbCheckBox" OnCheckedChanged="CheckBoxChanged" AutoPostBack="true" runat="server" />
                    </ItemTemplate>
                    /asp:TemplateField>
            </Columns>
        </asp:GridView>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="cbSelectAll"/>
    </Triggers> 
</asp:UpdatePanel>

Code Behind

The select All check box event handler loops through the gridview and finds the checkboxes. It ticks them if the select all checkbox is ticked otherwise it unticks them

The gridview checkbox event handler loops through the checkboxes and sets a flag to determine if it should tick or untick the select all checkbox. It exists the loop if any of the checkboxes are not ticked as select all must therefore be unticked as well

public void SelectAll (Object sender, Eventargs e)
{
    foreach (var row in grid.Rows)
    {
        var checkBox = (CheckBox)row.FindControl("cbCheckBox");
        checkBox.Checked = cbSelectAll.Checked;          
    }
}

public void CheckBoxChanged(Object sender, Eventargs e)
{
    var isSelectAll = true;

    foreach (var row in grid.Rows)
    {
        var checkBox = (CheckBox)row.FindControl("cbCheckBox");

        if(!checkBox.Checked)
        {
            isSelectAll = false;
            break;
        }
    }

    cbSelectAll.Checked = isSelectAll;          
}

Comments

[Damien_The_Unbeliever]

Maybe you can explain what you've done and why? Also, when posting code in two different languages, I'd recommend including a block of text between them to (if nothing else) point out the switch. This also gives you the opportunity (if necessary) to give a hint to the syntax highlighter to switch rules.

[user1254053]

Your fiddle works but when I copy your code in simple html page it does not. Do I also need to add some javascript files?

[skyfoot]

@user1254053. You will need jQuery for my example or change it to use pure JavaScript. The $ indicates that there is a library in use. Usually jquery