我有一个应用程序,当选择某个单选按钮时显示一个div,然后在取消选择单选按钮时隐藏该div。问题是附加到单选按钮的更改事件仅在选中单选按钮时被调用,而不是在选中另一个单元时被调用(取消选中前一个)。我目前的代码如下:
<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>
这似乎是一个非常简单的脚本,但事件只在check事件上调用,而不是在uncheck事件上调用。谁能告诉我为什么?
答案 0 :(得分:67)
处理广播组的更改事件,而不是每个按钮。然后看一下检查哪一个。
这是一些未经测试的代码,希望能够显示我正在谈论的内容:)...
$("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');
}
});
答案 1 :(得分:9)
获取无线电输入值时请注意此行为:
$('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()
没有像你期望的那样返回无线电输入的检查值 - 它返回第一个单选按钮的值。