jQuery :radio Selector

Last Updated : 10 Jul, 2023

The jQuery :radio Selector is used to select all elements of type radio. The working of $( “:radio” ) and $( “[type=radio]” ) is same. To select a group of radio buttons that are used in the form, we use $( “input[name=name_of_group]:radio” ). It returns an array of input elements of type radio.

Syntax:

Default Syntax:

 $( "input[name=group_name]:radio" )

Syntax used to take advantages: Above syntax cannot take advantage of the performance optimization of native DOM so use the below syntax instead.

 $("input[type=radio][name=group-1]")

Method-1: $(“input[type=radio]”) This method of selection selects all input elements of type radio ie. every radio element of the page.

Example 1:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <form action="">
        <input type="text" name="name" />
        <input type="radio" name="group-1" />
        <input type="radio" name="group-1" />
        <input type="radio" name="group-1" />
        <input type="radio" name="group-2" />
        <input type="radio" name="group-2" />
    </form>
</body>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
        let input = $("input[type=radio]").wrap(
            "<div></div>").parent().css({
                background: "green",
                display: "inline"
            })
        console.log(input)
    });
</script>
 
</html>

Console:

Output:

Method 2- $(“input:radio”) This produces the same result as the previous one.

Example 2:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <form action="">
        <input type="text" name="name" />
        <input type="radio" name="group-1" />
        <input type="radio" name="group-1" />
        <input type="radio" name="group-1" />
        <input type="radio" name="group-2" />
        <input type="radio" name="group-2" />
    </form>
</body>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
        let input = $("input:radio").wrap(
            "<div></div>").parent().css({
                background: "green",
                display: "inline"
            })
        console.log(input)
    });
</script>
 
</html>

Output:

Method-3: $(“input[type=radio][name=group-1]”) This will select specified group of radio inputs from the form.

Example 3:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <form action="">
        <input type="text" name="name" />
        <input type="radio" name="group-1" />
        <input type="radio" name="group-1" />
        <input type="radio" name="group-1" />
        <input type="radio" name="group-2" />
        <input type="radio" name="group-2" />
    </form>
</body>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
        let input =
            $("input[type=radio][name=group-1]").wrap(
                "<div></div>").parent().css({
                    background: "yellow",
                    display: "inline"
                })
        console.log(input)
    });
</script>
 
</html>