jQuery :checkbox Selector (original) (raw)

Last Updated : 11 Jul, 2025

ThejQuery :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 `

<style>
    p {
        font-size: 20px
    }
</style>

<script>
    $(document).ready(function () {
        $(":checkbox").wrap(
            "<span style='background-color:green'>");
    });
</script>

Add your Hobbies:

Dancing:

      Painting:
    <input type="checkbox" name="hobbies" value="painting">
    <br> 
  
      Singing:
    <input type="checkbox" name="hobbies" value="singing">
    <br>
</p>

`

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 `

<style>
    p {
        font-size: 20px
    }
</style>

<script>
    $(document).ready(function () {
        $("button").click(function () {
            $(":checkbox").wrap(
                "<span style='background-color:red'>");
        });
    });
</script>

Languages:

Python:

      C++:
    <input type="checkbox" name="hobbies" value="painting">
    <br> 
  
      Java:
    <input type="checkbox" name="hobbies" value="singing">
    <br><br>
    <button>Change color</button>
</p>

`

Output: