Check Uncheck All checkbox Of Asp.Net Checkboxlist Using jQuery

Check Uncheck All checkbox Of Asp.Net Checkboxlist Using jQuery

The checkbox can be easily check or uncheck using jQuery with just a line of code. Suppose we have a checkbox in our web page, and we have to check or uncheck it using jQuery. The checkbox is –

<input type="checkbox" id="myCheckbox" class="myCheckboxCss"/>

jQuery Check Checkbox

Use the function prop(); to check the checkbox using its id

$('#myCheckbox').prop('checked', true);

Check Checkbox using its class

$('.myCheckboxCss').prop('checked', true);

jQuery Uncheck Checkbox

In the same way uncheck this checkbox.

$('#myCheckbox').prop('checked', false);

Uncheck Checkbox using its class

$('.myCheckboxCss').prop('checked', false);

Don’t Use attr()

For jQuery 1.6+ the attr() function will not work for Checking and Unchecking Checkbox therefore use prop() in place of attr() in such situations.

jQuery Check Uncheck Asp.Net Checkboxlist

Sometimes we want to add a feature in our web page where all checkboxes inside an asp.net checkboxlist control gets checked & unchecked from a main checkbox. This can be easily done with a jQuery Code.

Here we use a main checkbox control for doing this task then place a click event for this checkbox. In this click event we loop against all input controls of type ‘checkbox’ placed inside checkboxlist control, and check or uncheck them depending upon whether our main checkbox is checked or not.

To Validate a Checkbox using jQuery see Learning jQuery Form Validation.

The aspx page is –

<asp:CheckBox ID="checkBox" Text="Buy All" Font-Bold="true" runat="server" />
<asp:CheckBoxList ID="checkBoxList" TextAlign="Right" runat="server">
    <asp:ListItem Enabled="true" Value="Driver_Steering">Steering</asp:ListItem>
    <asp:ListItem Value="Driver_Body">Body</asp:ListItem>
    <asp:ListItem Value="Driver_Reflectors">Reflectors</asp:ListItem>
    <asp:ListItem Value="Driver_Horn">Horn</asp:ListItem>
    <asp:ListItem Value="Driver_Leaks">Leaks</asp:ListItem>
    <asp:ListItem Value="Driver_Ammeter">Ammeter</asp:ListItem>
    <asp:ListItem Value="Driver_Transmission">Transmission</asp:ListItem>
    <asp:ListItem Value="Driver_Tail_Lights">Tail Lights</asp:ListItem>
    <asp:ListItem Value="Driver_Coupling_Device">Coupling Device</asp:ListItem>
    <asp:ListItem Value="Driver_Service_Brakes">Service Brakes</asp:ListItem>
    <asp:ListItem Value="Driver_Glass">Glass</asp:ListItem>
    <asp:ListItem Value="Driver_Exhaust">Exhaust</asp:ListItem>
    <asp:ListItem Value="Driver_Other_Items">Other Items</asp:ListItem>
    <asp:ListItem Value="Driver_Drive_Line">Drive Drive Line</asp:ListItem>
    <asp:ListItem Value="Driver_Clutch">Clutch</asp:ListItem>
    <asp:ListItem Value="Driver_Speedometer">Speedometer</asp:ListItem>
</asp:CheckBoxList>

The jQuery Code is –

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#checkBox').click(function () {
            if ($(this).is(":checked")) {
                $('[id *= checkBoxList]').find('input[type="checkbox"]').each(function () {
                    $(this).prop("checked", true);
                });
            }
            else {
                $('[id *= checkBoxList]').find('input[type="checkbox"]').each(function () {
                    $(this).prop("checked", false);
                });
            }
        });
    });
</script>

Note – We have used ‘[id *= checkBoxList]’ to find an elemeent whose id contains ‘checkBoxList’ so it gives the checkboxlist element.

This jQuery method is helpful in conditions where the ‘ClientId’ of the control is different to its id e.g. ‘ClientId’ becomes different when the control is placed inside an asp.net repeater or gridview.
Smallest Code

This code is provided by someone in the comments section. I have tested it and it works great.

$("#checkBox").change(function () {
$("#checkBoxList input").prop('checked', $(this).prop("checked"));
});

Let me explain how it works –

  • First we have placed the code inside the change event of “Buy All” checkbox. So whenever it is checked or unchecked the checked event will be called.
  • We are simply making the checked property, of all input elements which are inside the checkbox list, same as that of our “Buy All” checkbox.

Note – Checkbox are input element of type=”checkbox”.

DEMO DOWNLOAD

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.