Skip to content
Related Articles
Open in App
Not now

Related Articles

jQuery :radio Selector

Improve Article
Save Article
  • Last Updated : 14 Nov, 2022
Improve Article
Save Article

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 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: 

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=
</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: 

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=
</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: 

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=
</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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!