How to uncheck the checkbox when other checkbox is check for asp.net checkboxes

Question

My Asp.net Checkboxes

<asp:CheckBox ID="All" runat="server" Checked="true" Text="ALL" ForeColor="Black" /><br />
<asp:CheckBox ID="otherCheckBox2" runat="server" Checked="false" Text="Accepted" ForeColor="Black" CssClass="chkdisplay" /><br />
<asp:CheckBox ID="otherCheckBox3" runat="server" Checked="false"  Text="Contacted" ForeColor="Black" CssClass="chkdisplay"  /><br />
<asp:CheckBox ID="otherCheckBox4" runat="server" Checked="false" Text="Pending" ForeColor="Black" CssClass="chkdisplay" /><br />
<asp:CheckBox ID="otherCheckBox5" runat="server" Checked="false" Text="Pre-Authorized" ForeColor="Black" CssClass="chkdisplay" /><br />
<asp:CheckBox ID="otherCheckBox6" runat="server" Checked="false" Text="Show Deleted" ForeColor="Black" CssClass="chkdisplay" /><br />
<asp:CheckBox ID="otherCheckBox7" runat="server" Checked="false" Text="Treated" ForeColor="Black" CssClass="chkdisplay" />

Script i tried

 $(document).ready(function () {
            $('[id^="otherCheckBox"]').each(function () {
                if ($(this.checked)) {
                    $('#<%= All.ClientID %>').attr('checked', false);
                }
            });
        });

I want to iterate asp checkboxes and when any checkbox from 2 t0 7 is checked ,uncheck check with id="All".
I request all stackflow experts please suggest me a answer am waiting for answer for long time. Thanks in advance

Answer 1

Why not simply eliminate the each altogether:

$('#<%= All.ClientID %>').prop('checked', !($('[id^="otherCheckBox"]').not(':checked').length));

or if it is a fixed id:

$('#All').prop('checked', !($('[id^="otherCheckBox"]').not(':checked').length));
// class example of this same thing replaces the id prefix selector
$('#All').prop('checked', !($('.chkdisplay').not(':checked').length));

EDIT extra: I suspect you might want a toggle based on the ALL/group so: You can use this or just ignore it if it does not help you.

//if any is checked/changed reset All to reflect
$('[id^="otherCheckBox"]').on('change blur', function () {
    $('#All').prop('checked', !($('[id^="otherCheckBox"]').not(':checked').length));
});
// if All is changed, reflect the All setting (check/uncheck the group)
$('#All').on('change blur', function () {
    $('[id^="otherCheckBox"]').prop('checked', $(this).prop('checked'));
});
// set initial all state
$('[id^="otherCheckBox"]').eq(0).blur();

Fiddle showing that last part in function: http://jsfiddle.net/hZFFr/1/

Answer 2

Your code looks reasonable. A few pointers:

• There's no need to wrap this.checked in $() the way you're using it
• As you've shown that you're aware, by using All.ClientID, the ID of your HTML checkboxes may not be exactly that of your ASP.NET checkboxes. You may consider using $('.chkdisplay') or some other method to access the checkboxes of interest.
• The code you've posted will only run on DOMReady. You may also want to run it on any $('.chkdisplay').change
• If you're running jQuery 1.6 or later, use .prop('checked', false) rather than .attr