Selector :radio
El selector :radio selecciona botones
de opción. Consulte la etiqueta
radio.
El equivalente de $(':radio') es
$('[type=radio]').
Dado que :radio no es parte de la especificación CSS,
para mejorar el rendimiento en navegadores modernos
es mejor usar [type='radio'] en su lugar.
Sintaxis
Así seleccionamos los botones de opción:
$(':radio');
Al igual que con otros selectores de pseudoclase
(que comienzan con ':'), es mejor
poner el nombre de la etiqueta u otro selector antes de ':', de
lo contrario se aplicará el selector '*',
es decir, $(':radio') se interpretará como
$('*:radio'), por lo que en su lugar es mejor
usar $('input:radio').
Para seleccionar botones de opción relacionados se puede
usar $('input[name=gender]:radio').
Ejemplo
Seleccionemos los botones de opción, los envolveremos
en un span. Luego hagamos que los spans tengan fondo verde y
borde rojo usando el método
css:
<form>
<input type="button" value="button">
<input type="file">
<button>button</button>
<input type="reset">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="text">
</form>
<+javascript+>
$('form input:radio')
.wrap('')
.parent()
.css({background: 'green', border: '2px red solid'});
$('form').submit(function(event) {
event.preventDefault(); // previene el envío del formulario
});
<-javascript->
