jQuery :reset Selector

Quiz

The :reset selector in jQuery is used to select the input and button elements with type = "reset".

For instance, "$('input:reset')" would select all input elements that have type = "reset, but not the button elements.

Syntax

Following is the syntax of :reset selector in jQuery −

$(":reset")

Parameters

":reset" − This selector will select all reset buttons within the entire document.

Example 1

In the following example, we are using the ":reset" selector to select all the <input> elements with type = "reset" −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":reset").css("background-color", "red")
        });
    </script>
</head>
<body>
    <form>
        <input type="text" name="username" placeholder="Enter username">
        <input type="reset" value="Reset">
    </form>
</body>
</html>

When we execute the above program, the input element with type = "reset" will be highlighted with red background.

Example 2

In this example, we are using the ":reset" selector to select the <button> element with type = "reset" −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":reset").click(function(){
                alert("Reset button clicked!");
            });
        });
    </script>
</head>
<body>
    <form>
        <input type="text" name="email" placeholder="Enter your email">
        <button type="reset">Reset</button>
    </form>
</body>
</html>

After executing the program, an alert will be displayed after clicking the button element with type = "reset".

jquery_ref_selectors.htm

Print Page