jQuery :radio Selector

Quiz

The :radio selector in jQuery is used to select all the input elements with type = "radio" By selecting, we can manipulate the radio buttons such as "selecting", ":disabling", etc.

Syntax

Following is the syntax of :radio selector in jQuery −

$(":radio")

Parameters

Following is the description of above syntax:

":radio" − This selector will select all radio button elements in the document.

Example 1

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

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $(':radio').wrap("<span style='background-color:yellow'>");
            });
        });
    </script>
</head>
<body>
    <form>
        <input type="text" name="username" placeholder="Enter text here"><br>
        Male: <input type="radio"><br>
        Female: <input type="radio"><br>
        <button>Click</button>
    </form>
</body>
</html>

If we execute and click the button, It selects all input elements with type=radio and wraps with a span element with yellow background color.

Example 2

In this example, we are disabling all the radio buttons in a form −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $(":radio").prop("disabled", true);
            });
        });
    </script>
</head>
<body>
    <form>
        <label>
            <input type="radio" name="option" value="1"> Option 1
        </label>
        <label>
            <input type="radio" name="option" value="2"> Option 2
        </label>
        <label>
            <input type="radio" name="option" value="3"> Option 3
        </label>
        <br>
        <button>Disable All Radios</button>
    </form>
</body>
</html>

After clicking the "Disable All Radios", it selects all the input elements with type=radio and disables them.

jquery_ref_selectors.htm

Print Page