监视何时单选button未被选中

我有一个应用程序，当某个单选button被选中时显示一个div，然后当单选button被取消时隐藏该div。 问题是单选button附加的更改事件只在选中单选button时被调用，而不是在选中另一个时（不选中前一个）。 我目前的代码如下：

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

它看起来像一个非常简单的脚本，但事件只被调用的检查事件，而不是在uncheck事件。 谁能告诉我为什么？

Answer 1

处理收音机组上的更改事件，而不是每个button。 然后看看哪一个被检查。

这是一些未经testing的代码，希望显示我在说什么：）…

 $("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

获取无线电input值时请注意此行为：

 $('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() ); }); 

所以$('input[name="myRadio"]').val()并不返回无线电input的检查值，如你所期望的那样 – 它返回第一个单选button的值。