jQuery :checkbox Selector

Last Updated : 11 Jul, 2025

The jQuery :checkbox Selector is a very important element to make interactions with a user. In JQuery, we can build a simple checkbox to allow data entry as well.

Syntax:

$(":checkbox")

We can implement the checkbox in the code:

Example 1: In this example, we will select the input element which has a checkbox field button by using jQuery :checkbox Selector.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  
    <style>
        p {
            font-size: 20px
        }
    </style>
  
    <script>
        $(document).ready(function () {
            $(":checkbox").wrap(
                "<span style='background-color:green'>");
        });
    </script>
</head>
  
<body>
    <h2>Add your Hobbies:</h2>
    <p>Dancing:
        <input type="checkbox" name="hobbies" value="dancing">
        <br> 
      
          Painting:
        <input type="checkbox" name="hobbies" value="painting">
        <br> 
      
          Singing:
        <input type="checkbox" name="hobbies" value="singing">
        <br>
    </p>
</body>
  
</html>

Output:

Example 2: In this example, we will change the background color of the input element which has a checkbox field button with click function.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  
    <style>
        p {
            font-size: 20px
        }
    </style>
  
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $(":checkbox").wrap(
                    "<span style='background-color:red'>");
            });
        });
    </script>
</head>
  
<body>
    <h2>Languages:</h2>
    <p>Python:
        <input type="checkbox" name="hobbies" value="dancing">
        <br> 
      
          C++:
        <input type="checkbox" name="hobbies" value="painting">
        <br> 
      
          Java:
        <input type="checkbox" name="hobbies" value="singing">
        <br><br>
        <button>Change color</button>
    </p>
</body>
  
</html>