Tutorialspoint.dev

jQuery | :radio Selector

The :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 which 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 performance optimization of native DOM so use 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 page.
Example-1:

<!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=
  </script>
  
  <script>
    $(document).ready(function() {
        var 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 same result as previous one.
Example-2:



<!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=
</script>
<script>
    $(document).ready(function(){
        var 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:

<!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=
  </script>
<script>
    $(document).ready(function() {
        var input = 
          $("input[type=radio][name=group-1]").wrap(
          "<div></div>").parent().css({
            background: "yellow",
            display: "inline"
        })
        console.log(input)
    }); 
    
  </script>
  </html>

Console:

Output:



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter