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

Last Updated : 06 Jun, 2023

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=
"https://code.jquery.com/jquery-3.5.0.js">
    </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.

How to find all checkbox inputs using jQuery ?

krishnanand3

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?