jQuery 取消选中单选按钮时进行监控

Monitoring when a radio button is unchecked

提问by Dave Long

I have an application that shows one div when a certain radio button is selected and then hides that div when the radio button is unselected. The problem is that the change event attached to the radio button only gets called when the radio button is checked, not when another one is checked (unchecking the previous one). My current code is as follows:

我有一个应用程序，它在选择某个单选按钮时显示一个 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>

It seems like a pretty simple script, but the event only gets called on the check event, not on the uncheck event. Can anyone tell me why?

这似乎是一个非常简单的脚本，但该事件仅在检查事件上调用，而不是在取消检查事件上调用。谁能告诉我为什么？

回答by Brian

Handle the change event on the radio group, not each button. Then look to see which one is checked.

处理单选组上的更改事件，而不是每个按钮。然后看看检查了哪一个。

Here's is some untested code that hopefully shows what I'm talking about :)...

这是一些未经测试的代码，希望能说明我在说什么:)...

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

});

回答by Bradley Flood

Note this behavior when getting radio input values:

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

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

});

So $('input[name="myRadio"]').val()does not return the checked value of the radio input, as you might expect -- it returns the first radio button's value.

所以$('input[name="myRadio"]').val()不会像您期望的那样返回单选输入的检查值——它返回第一个单选按钮的值。