Check Uncheck all checkbox Of ASP.NET Checkboxlist using jQuery

The checkbox can be easily be checked or unchecked using jQuery with just a single line of code. If your webpage contains a checkbox element that you want to check or uncheck dynamically using jQuery, follow the steps outlined below..

The checkbox is:

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

jQuery Checkbox Checked

Use the function prop() to check the checkbox using it’s unique id.

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

Check the Checkbox using it’s class.

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

jQuery Uncheck Checkbox

In the same way, uncheck this checkbox by it’s id.

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

Uncheck the Checkbox using its class.

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

Don’t Use attr()

Starting with jQuery 1.6, the attr() function no longer works reliably for checking and unchecking checkboxes. This is because attr() retrieves and sets HTML attributes, while checkbox states are actually managed as DOM properties. As a result, if you’re using jQuery 1.6 or later, you should use the prop() in place of attr() in such situations.

jQuery Check Uncheck Asp.Net Checkboxlist

A common requirement in web development is adding a feature in the web page where all checkboxes inside an asp.net checkboxlist control need to be checked and unchecked from a master checkbox. This functionality can be easily implemented with a few lines of jQuery code, improving both usability and user experience on forms with multiple selectable options.

Here you will use a master checkbox control for doing this task, then place a click event for this checkbox.

In this click event, loop through all input controls of type checkbox which is placed inside checkboxlist control, and check or uncheck them depending upon whether the master checkbox checked state.

<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">
  $(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 – I have used [id *= checkBoxList] to find an element whose id contains the substring checkBoxList, anywhere within it — not necessarily at the start or end. So it gives all the checkboxlist elements that I require.

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 place the code inside the change event of Buy All checkbox. So whenever it is checked or unchecked, the checked event will be called.
• Here I are simply making the checked property (of all input elements which are inside the checkbox list), same as that of Buy All checkbox.

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

Download the codes:

DOWNLOAD