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.

Answer 1

Above code I modifiyed it, if user unchecked the child rows of grid. grid header will automatically uncheck.

    <script type="text/javascript">
    function UncheckHeader(headerchk) {
        var gvcheck = document.getElementById('gvdetails');
            var inputs = gvcheck.rows[0].getElementsByTagName('input');
            inputs[0].checked = false;
    }
    function SelectAll(headerchk) {
        var gvcheck = document.getElementById('gvdetails');
        var i;
      //  if 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;
            }
        }
    }
</script>
<asp:GridView ID="gvdetails" runat="server" >
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="chkheader" runat="server" onclick="javascript:SelectAll(this)" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkchild"    runat="server" onclick="javascript:UncheckHeader(this)" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

more details here

Answer 2

The following code should work. I tested it.

Javascript:

<script type="text/javascript">
        function OnOneCheckboxSelected(chkB) {
            var IsChecked = chkB.checked;
            var Parent = document.getElementById('gridFileList');
            var cbxAll;
            var items = Parent.getElementsByTagName('input');
            var bAllChecked = true; 
            for (i = 0; i < items.length; i++) {
                if(items[i].id.indexOf('cbxSelectAll') != -1){
                    cbxAll = items[i];
                    continue;
                }
                if (items[i].type == "checkbox" && items[i].checked == false) {
                    bAllChecked = false;
                    break;
                }
            }
            cbxAll.checked = bAllChecked;
        }

        function SelectAllCheckboxes(spanChk) {
            var IsChecked = spanChk.checked;
            var cbxAll = spanChk;
            var Parent = document.getElementById('gridFileList');
            var items = Parent.getElementsByTagName('input');
            for (i = 0; i < items.length; i++) {
                if (items[i].id != cbxAll.id && items[i].type == "checkbox") {
                    items[i].checked = IsChecked;
                }
            }
        }
    </script>

ASPX Markup:

<asp:TemplateField HeaderText="Select">
   <HeaderTemplate>
      <asp:CheckBox ID="cbxSelectAll" OnClick="javascript:SelectAllCheckboxes(this);" runat="server" />
   </HeaderTemplate>
   <ItemTemplate>
      <asp:CheckBox OnClick="javascript:OnOneCheckboxSelected(this);" ID="cbxSelect" runat="server" />
   </ItemTemplate>
</asp:TemplateField>

Answer 3

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

Answer 4

Look at this code. hope this will help you

<div>
<asp:CheckBox ID="chkSelectAll" runat="server" />
    <asp:GridView ID="GridView1" runat="server">
        <Columns>
            <asp:TemplateField HeaderText="Select">
                <ItemTemplate>
                    <asp:CheckBox ID="chkSelect" runat="server" oncheckedchanged="chkSelect_CheckedChanged" AutoPostBack="true" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

protected void chkSelect_CheckedChanged(object sender, EventArgs e)
    {
        bool isFound = false;
            foreach (GridViewRow gvr in GridView1.Rows)
            {
                CheckBox chkSelect = gvr.FindControl("chkSelect") as CheckBox;
                if (chkSelect.Checked == false)
                {
                    isFound = true;
                    break;
                }

            }

            if (isFound)
            {
                chkSelectAll.Checked = false;
            }
            else
            {
                chkSelectAll.Checked = true;

            }
    }

Answer 5

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>

Answer 6

Best way I can think of is to convert the GridView's CheckBoxField to a TemplateField. Then wire up the new asp:CheckBox in your TemplateField to the CheckedChanged event. In your code-behind, you handle the CheckedChanged event, then when any of the checkboxes change to unchecked, you can toggle your "check all" checkbox.