2011-02-28 16 views
66

Tengo 2 botones de opción y jquery ejecutándose.javascript jquery botón de radio haga clic en

<input type="radio" name="lom" value="1" checked> first 
<input type="radio" name="lom" value="2"> second 

Ahora, con un botón que puedo configurar haga clic para ejecutar una función. ¿Cuál es la forma de hacer que los botones de radio ejecuten una función cuando hago clic en uno de ellos?

+1

Nota. Lo mejor es no hacer que los elementos de formulario respondan al clic, ya que muchas personas navegan formularios usando el teclado. – superluminary

Respuesta

121

Puede utilizar .change por lo que quieres

$("input[@name='lom']").change(function(){ 
    // Do something interesting here 
}); 

como de jQuery 1.3

ya no es necesario el '@'. Forma correcta de seleccionar es:

$("input[name='lom']") 
+7

Tenga en cuenta que, a partir de jQuery 1.3, ya no necesita la '@'. La forma correcta de seleccionar es: '$ (" input [name = 'lom'] ")' – lubar

+3

¿Es posible integrar esta solución con la solución de @JohnIdol a continuación con instrucciones condicionales basadas en valores de radio? ex '$ (" input [name = 'lom'] "). change (function() {if ($ (this) .val() === '1') {.....// descartar sentencias condicionales basadas en valores aquí}; ' – LazerSharks

+0

A partir de jQuery 1.3, ** no debe ** usar '@' con la propiedad del nombre. Si lo hace, obtendrá un 'jquery.self-0a6570c ... .js? Body = 1: 1464 Error no detectado: error de sintaxis, error de expresión no reconocida'. Entonces no es una cuestión de elección. – scaryguy

6

esto debe ser bueno

$(document).ready(function() { 
    $('input:radio').change(function() { 
     alert('ole'); 
    }); 
}); 
+0

Has perdido a); en la parte trasera. –

40

Si usted tiene sus radios en un recipiente con id = radioButtonContainerId todavía se puede utilizar onclick y después comprobar cuál es seleccionado y, en consecuencia ejecutar algunas funciones:

$('#radioButtonContainerId input:radio').click(function() { 
    if ($(this).val() === '1') { 
     myFunction(); 
    } else if ($(this).val() === '2') { 
     myOtherFunction(); 
    } 
    }); 
+0

Gracias. Esto funcionó para mí, porque mi campo era parte de una matriz y no pude usar la notación de entrada [name = 'xxx'] - crafter

+0

¿Esto reacciona incluso si tabula y mueve el marcador con las teclas de flecha? – Alisso

+0

esto no funcionará en el selector de # móvil no funciona en el móvil. – zawhtut

3

siempre es bueno para restringir la búsqueda DOM. así que es mejor usar un padre también, para que no se atraviese todo el DOM.

IT IS VERY FAST

<div id="radioBtnDiv"> 
    <input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/> 
<input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/> 
</div> 



$("input[name='myButton']",$('#radioBtnDiv')).change(
    function(e) 
    { 
     // your stuffs go here 
    }); 
8

Hay varias maneras de hacer esto. Tener un contenedor alrededor de los botones de radio es muy recomendable independientemente, pero también puedes poner una clase directamente en los botones. Con este código HTML:

<ul id="shapeList" class="radioList"> 
<li><label>Shape:</label></li> 
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li> 
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li> 
</ul> 

puede seleccionar por clase:

$(".shapeButton").click(SetShape); 

o seleccionar por ID de contenedor:

$("#shapeList").click(SetShape); 

En cualquier caso, el evento se disparará al hacer clic en cualquiera de la radio botón o la etiqueta correspondiente, aunque extrañamente en este último caso (al seleccionar por "#shapeList"), al hacer clic en la etiqueta se activará la función de clic dos veces por algún motivo, al menos en FireFox; seleccionar por clase no hará eso.

SetShape es una función, y se ve así:

function SetShape() { 
    var Shape = $('.shapeButton:checked').val(); 
//dostuff 
} 

esta manera, usted puede tener etiquetas en sus botones, y puede tener múltiples listas de botón de radio en la misma página que hacer cosas diferentes. Incluso puede hacer que cada botón individual en la misma lista haga cosas diferentes configurando un comportamiento diferente en SetShape() en función del valor del botón.

13
<input type="radio" name="radio" value="creditcard" /> 
<input type="radio" name="radio" value="cash"/> 
<input type="radio" name="radio" value="cheque"/> 
<input type="radio" name="radio" value="instore"/> 

$("input[name='radio']:checked").val() 
+1

Aunque esta respuesta no muestra cómo conectar el código al evento, me gusta que contenga la información sobre cómo recuperar el valor del grupo de botones de opción. – Manfred

+1

$ ("input [@ name = 'lom']"). Change (function() { // Haga algo interesante aquí }); –

Cuestiones relacionadas