Check Uncheck all checkbox Of ASP.NET Checkboxlist using jQuery

Last Updated: June 6, 2021

The checkbox can be easily be checked or unchecked using jQuery with just a line of code. Suppose there is a checkbox in the web page, and you have to check or uncheck it using jQuery. Here you have to perform the given steps.

The checkbox is:

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

jQuery Checkbox Checked

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

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

Check the Checkbox using its class.

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

Have you read this tutorial on doing Multiple File Uploads simultaneously using JavaScript and also providing real time progress of the uploads to the user.

jQuery Uncheck Checkbox

In the same way uncheck this checkbox.

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

Uncheck the Checkbox using its class.

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

Don’t Use attr()

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

jQuery Check Uncheck Asp.Net Checkboxlist

Sometimes you 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 some jQuery Code.

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

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

Tutorial on jQuery Validation explains how to validate the value of a checkbox during form submission or on the button click.

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">
  $(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 elemeent whose id contains checkBoxList, and so it gives the checkboxlist element.

This jQuery method is helpful in conditions where the ‘ClientId’ of the control is different to its id. Example the ‘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 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

Do you want to create your own API and expose it to other users online? Then you need to check this tutorial on Implement ASP.NET Web API.