jQuery :checked Selector

Posted in jQuery Tutorial

Updated on Oct 30, 2024

By Mari Selvan

👁️ 78 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

jQuery simplifies web development by providing powerful tools for manipulating HTML elements and handling events. One such tool is the :checked selector, which allows you to target checked checkboxes and radio buttons effortlessly. Mastering this selector can greatly enhance your ability to create interactive and dynamic web pages.

In this guide, we'll delve into the usage of the jQuery :checked selector with clear examples to help you understand its potential.

🧠 Understanding :checked Selector

The :checked selector is designed to target HTML elements that are checked, primarily checkboxes and radio buttons. It is especially useful when you want to perform actions based on the checked state of these inputs.

💡 Syntax

The syntax for the :checked selector is straightforward:

syntax.js

Copied

$(":checked")

📝 Example

Selecting Checked Checkboxes:

Suppose you have a group of checkboxes and you want to select all the checked ones. You can achieve this using the :checked selector as follows:
index.html
Copied
```
<input type="checkbox" id="checkbox1" checked>
<input type="checkbox" id="checkbox2">
<input type="checkbox" id="checkbox3" checked>
```
example.js
Copied
```
$("input:checked").each(function() {
    console.log($(this).attr('id'));
});
```
This will log the IDs of the checked checkboxes (checkbox1 and checkbox3) to the console.
Styling Checked Elements:

You can apply CSS styles to checked elements dynamically using jQuery. For instance, let's change the background color of checked checkboxes:
index.html
Copied
```
<input type="checkbox" id="checkbox1" checked>
<input type="checkbox" id="checkbox2">
<input type="checkbox" id="checkbox3" checked>
```
example.js
Copied
```
$("input:checked").css("background-color", "lightblue");
```
This will set the background color of checked checkboxes to light blue.
Handling Events on Checked Elements:

You can also bind events to checked elements using jQuery. Here's an example where we alert a message when a checkbox is checked:
index.html
Copied
```
<input type="checkbox" id="checkbox1">
```
example.js
Copied
```
$("#checkbox1").change(function() {
    if($(this).is(":checked")) {
        alert("Checkbox is checked!");
    }
});
```
Unchecking Checkboxes Programmatically:

If you need to uncheck checkboxes based on certain conditions, jQuery can simplify the task. For example:
index.html
Copied
```
$("#uncheckButton").click(function() {
    $("input:checked").prop("checked", false);
});
```
This will uncheck all checked checkboxes when a button with the ID uncheckButton is clicked.

🎉 Conclusion

The jQuery :checked selector is a powerful tool for selecting and manipulating checked checkboxes and radio buttons. Whether you want to perform actions, style elements, handle events, or even manipulate the checked state programmatically, this selector provides an efficient solution.

By mastering its usage, you can create more interactive and dynamic web pages effortlessly.