Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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, and JavaScript

Note: In jQuery button is an extension and not part of the CSS specification. You cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method by using the jquery button.

For better performance: First select the elements using a pure CSS selector and then use .filter(“:button”).

Approach: In this article, we will learn about how to find all button inputs and mark them using javascript. To complete this task by using: button selector in your code. 

:button selector: It is used to select all button elements and elements of the type button. 

Syntax:

$(":button")

Example: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <style>
        textarea {
            height: 35px;
        }
 
        div {
            color: red;
        }
 
        fieldset {
            margin: 0;
            padding: 0;
            border-width: 0;
        }
 
        .marked {
            background-color: yellow;
            border: 3px red solid;
        }
    </style>
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
 
    <h3>How to find all button inputs
        and mark them using jQuery?
    </h3>
    <form>
        <fieldset>
            <input type="button" value="Input Button" />
            <input type="checkbox" />
 
            <input type="file" />
            <input type="hidden" />
            <input type="image" />
 
            <input type="password" />
            <input type="radio" />
            <input type="reset" />
 
            <input type="submit" />
            <input type="text" />
            <select>
                <option>Option</option>
            </select>
 
            <textarea></textarea>
            <button>Button</button>
        </fieldset>
    </form>
    <div></div>
 
    <script>
        let input = $(":button").addClass("marked");
        $("div").text("Number of button found - " + input.length + ".");
        // Prevent the form from submitting
        $("form").submit(function (event) {
            event.preventDefault();
        });
    </script>
</body>
</html>


Output: You can notice that all the button inputs are marked.



Last Updated : 06 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads