clic en el botón de radio de javascript jquery

89

Tengo 2 botones de radio y jquery ejecutándose.

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

Ahora, con un botón puedo configurar onClick 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?

javascript jquery

— David19801
fuente

4

Nota. Es mejor no hacer que los elementos del formulario respondan al clic, ya que muchas personas navegan por los formularios usando el teclado.

— superluminario

167

Puedes usarlo .changepara lo que quieras

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

a partir de jQuery 1.3

ya no necesitas la '@'. La forma correcta de seleccionar es:

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

— Peter Kelly
fuente

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

4

¿Es posible integrar esta solución con la solución de @JohnIdol a continuación con declaraciones condicionales basadas en valores de radio? ex

$("input[name='lom']").change(function(){ if ($(this).val() === '1') {..... // rest conditional statements based on values here } ;

— LazerSharks

A partir de jQuery 1.3, no debe usar '@' con la propiedad name. Si lo hace, obtendrá un jquery.self-0a6570c….js?body=1:1464 Uncaught Error: Syntax error, unrecognized expressionerror. Entonces no es cuestión de elección.

— scaryguy

53

Si tiene sus radios en un contenedor con id = radioButtonContainerId, aún puede usar onClick y luego verificar cuál está seleccionado y, en consecuencia, ejecutar algunas funciones:

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

— JohnIdol
fuente

Gracias. Esto funcionó para mí, porque mi campo era parte de una matriz y no podía usar la notación input [name = 'xxx'] - <input type = "radio" name = "Need [Measure_type]" id = "Need_measure_type" value = "aaa">

— crafter

¿Esto reacciona incluso si presionas la pestaña hacia abajo y mueves el marcador con las teclas de flecha?

— Alisso

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

— zawhtut

19

<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()

— Bishoy Hanna
fuente

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 () {// Haz algo interesante aquí});

— Bishoy Hanna

11

Esto debe ser bueno

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

— Adam Lukaszczyk
fuente

Te has perdido a); en la parte trasera.

— Biswas Khayargoli

8

Hay varias formas de hacer esto. Independientemente, se recomienda encarecidamente tener un contenedor alrededor de los botones de opción, pero también puede poner una clase directamente en los botones. Con este 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 seleccione por ID de contenedor:

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

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

SetShape es una función y tiene este aspecto:

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

De esta manera, puede tener etiquetas en sus botones y puede tener varias listas de botones de opción en la misma página que hacen cosas diferentes. Incluso puede hacer que cada botón individual en la misma lista haga cosas diferentes configurando un comportamiento diferente en SetShape () según el valor del botón.

— ZeroK
fuente

3

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

ES MUY RÁPIDO

<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
    });

— Vins
fuente