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