¿Cómo escucho los cambios en el valor seleccionado de un RadioGroup usando JQuery?

Necesito registrar un controlador para un grupo de botones de opción. Estoy usando JQuery y esperaba que su método .change lo lograría. Sin embargo, no he experimentado el comportamiento deseado.¿Cómo escucho los cambios en el valor seleccionado de un RadioGroup usando JQuery?

Aquí hay un fragmento de muestra que he escrito. Lamentablemente, el "radioValueChanged" solo se invoca en la carga inicial. Seleccionar verdadero/falso no activa el controlador.

<html> 
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> 

<form id="myForm"> 
    <div id="Question1Wrapper"> 
     <div> 
      <input type="radio" name="controlQuestion" id="valueFalse" value="0" /> 
      <label for="valueFalse"> 
       False</label> 
     </div> 
     <div> 
      <input type="radio" name="controlQuestion" id="valueTrue" value="1" /> 
      <label for="valueTrue"> 
       True</label> 
     </div> 
    </div> 
    <div id="Question2Wrapper"> 
     <div> 
      <label for="optionalTextBox"> 
       This is only visible when the above is true</label> 
      <input type="text" name="optionalTextBox" id="optionalTextBox" value="" /> 
     </div> 
    </div> 

    <script type="text/javascript"> 
     jQuery(document).ready(function() 
     { 
      $("#controlQuestion").change(radioValueChanged('controlQuestion')); 
     }) 

     function radioValueChanged(radioName) 
     { 
      radioValue = $('input[name=' + radioName + ']:checked', '#myForm').val(); 

      alert(radioValue); 

      if(radioValue == 'undefined' || radioValue == "0") 
      { 
       $('#Question2Wrapper:visible').hide(); 
      } 
      else 
      { 
       $('#Question2Wrapper:visible').show(); 
      } 
     } 
    </script> 
</form>

Fuente

2010-11-03 Justin

Hay algunos problemas aquí.

Está ejecutando inmediatamente radioValueChanged('controlQuestion') sobre la ejecución del script, ya que es una llamada de método y no una asignación de funciones.
El selector $("#controlQuestion") es incorrecto, no tiene ningún elemento con id de controlQuestion.
El método radioValueChanged no maneja correctamente los valores ya que se pasarían a un manejador de eventos jQuery.

Usted podría intentar algo como lo siguiente:

jQuery(document).ready(function() 
    { 
     $("input[name='controlQuestion']").change(radioValueChanged); 
    }) 

    function radioValueChanged() 
    { 
     radioValue = $(this).val(); 

     alert(radioValue); 

     if($(this).is(":checked") && radioValue == "0") 
     { 
      $('#Question2Wrapper').hide(); 
     } 
     else 
     { 
      $('#Question2Wrapper').show(); 
     } 
    }

En honor a la verdad no estoy seguro de si esa es la lógica real que usted está buscando con la sentencia if, pero espero que esto proporcionará una base para que usted corrija el código actual.

Fuente

2010-11-03 20:58:09

Awesome thanks. Como puede ver, javascript/jquery es bastante nuevo/está oxidado. Así que '#' siempre prefija una identificación, no un nombre ... es bueno saber :) ¿Qué hace exactamente "$ (this) .is (": checked ")? Estoy pensando que quiero lo opuesto a eso. si no se selecciona ningún valor, quiero que se oculte la pregunta. – Justin

@Justin Sí, los selectores siguen realmente las reglas del selector CSS, puede buscar w3 para selectores css ... jerarquía, nombre, id. También el 'es' es una función jQuery: http : //docs.jquery.com/Is (aunque no lo encontré en api.jquery.com lo cual me preocupa). –

'is()' es * definitivamente * en el subdominio api: [api.jquery.com /is/](http://api.jquery.com/is/). –

$('#Question2Wrapper:visible').show();

Sacar la : Visible, esto sólo lo seleccionará si el div ya está mostrando, en efecto, nunca se mostrará si está oculto.

$('#Question2Wrapper').show();

I digress, creo que Quintin golpea la mayoría de los puntos. Hay algunos problemas pasando aquí.

Fuente

2010-11-03 20:57:36

¿Cómo escucho los cambios en el valor seleccionado de un RadioGroup usando JQuery?

Respuesta

Cuestiones relacionadas