Open In App

jQuery :checkbox Selector

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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=
    </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=
    </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>


Output:

 



Last Updated : 17 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads