jQuery | :Selector de radio

El Selector :radio se utiliza para seleccionar todos los elementos de tipo radio. El funcionamiento de $( “:radio” ) y $( “[type=radio]” ) es el mismo.
Para seleccionar un grupo de botones de radio que se usan en el formulario, usamos $( “input[name=name_of_group]:radio” )
Devuelve una array de elementos de entrada de tipo radio.

Sintaxis:

  • Sintaxis predeterminada:
     $( "input[name=group_name]:radio" ) 
  • La sintaxis solía aprovechar las ventajas: la sintaxis anterior no puede aprovechar la optimización del rendimiento del DOM nativo, por lo tanto, utilice la sintaxis siguiente en su lugar.
     $("input[type=radio][name=group-1]") 

Método-1: $(“entrada[tipo=radio]”) Este método de selección selecciona todos los elementos de entrada de tipo radio, es decir. cada elemento de radio de la página.
Ejemplo 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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  
  <script>
    $(document).ready(function() {
        var input = $("input[type=radio]").wrap(
          "<div></div>").parent().css({
            background: "green",
            display: "inline"
        })
        console.log(input)
    });
</script>
  
</html>

Salida de la consola :


Método 2- $(“input:radio”) Esto produce el mismo resultado que el anterior.
Ejemplo-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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        var input=$("input:radio").wrap(
        "<div></div>").parent().css({
        background:"green",
        display:"inline"
    })
    console.log(input)
    });
</script>
</html>

Producción:

Método 3: $(“entrada[tipo=radio][nombre=grupo-1]”) Esto seleccionará un grupo específico de entradas de radio del formulario.
Ejemplo-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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </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>

Consola:

Producción:

Publicación traducida automáticamente

Artículo escrito por Pankaj_Singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *