How to find all checkbox inputs using jQuery ?

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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </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>