How to find all checkbox inputs using jQuery ?

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>

Output:

checkbox

How to find all checkbox inputs using jQuery ?

K

krishna_97

Improve

Article Tags :

Similar Reads

How to find all button inputs and mark them using jQuery ?

jQuery is a small and fast JavaScript library with a motto: "Write Less And Do More". To use JQuery you can either download the jquery library on your local machine or include the jquery library in your HTML code. Keep in mind that before learning JavaScript you have a basic knowledge of HTML, CSS,

How to find all input elements that are enabled using jQuery?

The jQuery " :enabled" pseudo-class selector helps to find all the input element that are enabled. This pseudo-class selector should only be used for selecting HTML elements that support the disabled attribute i.e (<button>, <input>, <textarea>, <select>, <option>, <

How to get all selected checkboxes in an array using jQuery ?

In this article, we are going to discuss various methods to get all the selected checkboxes in an array using jQuery. Several ways of doing this in jQuery are explained in detail with their practical implementation using code examples. Table of Content Using the array.push() method with each() metho

How to select all on focus in input using JQuery?

The select() event is applied to an element using jQuery when the user makes a text selection inside an element or on focus the element. This event is limited to some fields. Syntax: $("selected element").select(); //Select all Input field on focus $("input").select(); //Select Input field on focus

How to hide the checkbox based on value in jQuery?

The checkbox is used to set the content according to the user which he wants to see at the interface. Users also can set multiple choices according to their wishes.Syntax:$('input[name=foo]').attr('checked', false);ApproachIntegrate jQuery in HTML file via CDN Links. Includes the necessary title. Ad