Skip to content
Related Articles

Related Articles

How to find all checkbox inputs using jQuery ?

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Jan, 2022

The task is to find all the checkbox input using jQuery. Checkboxes are the square boxes that are ticked when activated, and it is used to select one or more number of choices.

Method and Selectors used:

  • :checkbox: This selector is used to select the input element with type = checkbox.
  •  .wrap(): This method is used to specify the HTML element around each selected element.

Approach:

  • Create the HTML page with the input type checkbox.
  • Using the checkbox selector you can select all the input with the type checkbox.
  • With the help of the .wrap() method, you can style those selected items.

Example:

HTML




<!DOCTYPE html>
<html>
  <head>
    <script src=
    </script>
    <style>
      body {
        text-align: center;
        font-size: 30px;
      }
      button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
      }
    </style>
 
    <script>
      $(document).ready(function () {
        $(":checkbox").wrap("<span style='border-style:dotted'>");
      });
    </script>
  </head>
  <body>
    <h2 style="color: green">GeeksforGeeks</h2>
 
    <form action="">
      First Name: <input type="text" name="user" />
      <br />
      <br />I like chocolates
      <input type="checkbox" name="chocolate"
             value="chocolate" /><br />
      I like fruits:
      <input type="checkbox"
             name="fruits" value="fruits" />
      <br />
      I like blue color:
      <input type="checkbox"
             name="color" value="color" />
      <br />
      <button>Submit</button>
    </form>
  </body>
</html>

Output:

checkbox


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!