Supervisión cuando un botón de opción está desactivado

Question

Tengo una aplicación que muestra un div cuando se selecciona un botón de opción determinado y luego lo oculta cuando el botón de opción no está seleccionado. El problema es que el evento de cambio asociado al botón de radio solo se invoca cuando se marca el botón de opción, no cuando se marca otro (desmarcar el anterior). Mi código actual es la siguiente:

<form name="newreport" action="#buildurl('report.filters')#" method="post"> 
    <dl class="oneColumn"> 
     <dt class="first"><label for="txt_name">Name</label></dt> 
     <dd><input type="text" name="name" id="txt_name" class="text" /></dd> 
     <dt><strong>Type</strong></dt> 
     <dt><input type="radio" name="type" id="rdo_list" value="list" checked="checked" /><label for="rdo_type" style="display:inline;">List</label></dt> 
     <dd>List a group of records</dd> 
     <dt><input type="radio" name="type" id="rdo_fields" value="fields" /><label for="rdo_fields" style="display:inline;">Field Breakdown</label></dt> 
     <dd>Breaks down distinct field values for comparison</dd> 
     <dt><input type="radio" name="type" id="rdo_history" value="history" /><label for="rdo_history" style="display:inline;">Historical Comparison</label></dt> 
     <dd>Provides record changes over a group of years for growth comparisons</dd> 
     <dt><input type="radio" name="type" id="rdo_breakdown" value="breakdown" /><label for="rdo_breakdown" style="display:inline;">Student Breakdown</label></dt> 
     <dd>Breaks down students by school, district or grade</dd> 
     <div class="reportyear"> 
      <dt><label for="txt_year">Year to Report</label></dt> 
      <dd><input type="text" name="year" id="txt_year" class="text" value="#year(Rc.yearstart)#" /></dd> 
     </div> 
     <div class="date-spans" style="display:none;"> 
      <dt><label for="txt_yearstart">Year Start</label></dt> 
      <dd><input type="text" name="yearstart" id="txt_yearstart" class="text" value="#evaluate(year(Rc.yearstart)-5)#" /></dd> 
      <dt><label for="txt_yearend">Year End</label></dt> 
      <dd><input type="text" name="yearend" id="txt_yearend" class="text" value="#year(Rc.yearstart)#" /></dd> 
     </div> 
    </dl> 
</form> 


<script type="text/javascript"> 
    $(function(){ 
     $('##rdo_history').change(function(e){ 
      var isChecked = $(this).attr(checked); 
      var $datespan = $('form .date-spans'); 
      var $year = $('form .reportyear'); 

      if(isChecked){ 
       $year.css({display:'none'}); 
       $datespan.fadeIn('fast'); 
      }else{ 
       $datespan.css({display:'none'}); 
       $year.fadeIn('fast'); 
      } 
     }); 
    }); 
</script> 

Parece como un guión bastante simple, pero el evento sólo se llama a en el caso de verificación, no en el caso de desmarque. puede alguien decirme por que?

Answer 1

Maneje el evento de cambio en el grupo de radio, no en cada botón. Luego mira para ver cuál está marcado.

Aquí hay un código no probado que se espera que muestra lo que estoy hablando:) ...

$("input[name='type']").change(function(e){ 
    if($(this).val() == 'history') { 
     $year.css({display:'none'}); 
     $datespan.fadeIn('fast'); 
    } else { 
     $datespan.css({display:'none'}); 
     $year.fadeIn('fast'); 
    } 

}); 

Answer 2

Nota este comportamiento cuando consiguen valores de entrada de radio:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group 

    // This returns the value of the checked radio button 
    // which triggered the event. 
    console.log($(this).val()); 

    // but this will return the first radio button's value, 
    // regardless of checked state of the radio group. 
    console.log($('input[name="myRadio"]').val()); 

}); 

Así $('input[name="myRadio"]').val() no devuelve el valor comprobado de la entrada de radio, como es de esperar, devuelve el valor del primer botón de opción.