How to Retrieve All Checked Checkboxes Using jQuery

a computer screen with a program running on it

In the realm of web development, especially when dealing with forms, checkboxes are a common element. They allow users to select multiple options from a list, and as developers, we often need to retrieve the values of these checked checkboxes. jQuery, a fast and concise JavaScript library, offers a straightforward method to achieve this. In this guide, we will delve deep into how to find all checked checkboxes using jQuery.

graph TD A[Start] B[Retrieve all checkboxes] C[Filter checked checkboxes] D[Display IDs of checked checkboxes] E[End] A --> B B --> C C --> D D --> E

Selecting Checked Checkboxes with jQuery

To select all checked checkboxes in a webpage using jQuery, you can utilize the :checked pseudo selector. This selector specifically targets checkboxes with the checked property. Here's a simple example:

JavaScript
$('input[type=checkbox]:checked')

In the above code, we first target all input elements of type checkbox. By appending :checked, we filter out only those checkboxes that are checked.

If you were to use:

JavaScript
$('input[type=checkbox]')

This would select all checkboxes, irrespective of whether they are checked or unchecked.

Practical Example: Displaying Checked Checkboxes

Consider an HTML page with three checkboxes labeled "Read", "Write", and "Speak". These checkboxes might represent language proficiency levels. For demonstration purposes, let's assume the "Read" and "Write" checkboxes are checked, while "Speak" is unchecked.

Here's how the HTML structure might look:

JavaScript
<h2>Displaying all checked checkbox values in jQuery</h2>

Read: <input type="checkbox" id="read" checked="checked" />
Write: <input type="checkbox" id="write" checked="checked" />
Speak: <input type="checkbox" id="speak" />

<div id="output"></div>

To display the IDs of the checked checkboxes, we can use the following jQuery code:

JavaScript
$(document).ready(function() {
    $('input[type=checkbox]:checked').each(function() {
        var status = (this.checked ? $(this).val() : "");
        var id = $(this).attr("id");
        $('#output').append("<h3>" + id + " : " + status + "</h3>");
    });
});

When this code is executed, the output will display the IDs of the checked checkboxes, which in this case are "read" and "write".

Author