监控单选按钮未选中时 [英] Monitoring when a radio button is unchecked

问题描述

当我选择某个单选按钮时，我有一个应用程序显示一个div，然后在单选按钮未被选择时隐藏该div。问题是，仅当单选按钮被检查时，仅在单选按钮附加的更改事件才被调用，而不是当检查另一个按钮时（取消选中上一个按钮）。我现在的代码如下：

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:

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

推荐答案

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

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

});

这篇关于监控单选按钮未选中时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！