Мониторинг при выключенном переключателе

У меня есть приложение, которое показывает один 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>

Кажется, это довольно простой script, но событие вызывается только на событие проверки, а не на событие uncheck. Может ли кто-нибудь сказать мне, почему?

Ответ 1

Обработать событие изменения в группе радио, а не каждую кнопку. Затем посмотрите, какой из них отмечен.

Вот какой непроверенный код, который, надеюсь, показывает, о чем я говорю:)...

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

});

Ответ 2

Обратите внимание на это при получении значений радиовхода:

$('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 value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

Итак, $('input[name="myRadio"]').val() не возвращает проверенное значение радиовхода, как и следовало ожидать - оно возвращает первое значение переключателя.

Ответ 3

Простое решение

var newValue; // vale of checked radio button
var oldValue; // value of unchecked radio button

$('.special-radio').change(function(){
    oldValue = newValue;
    newValue = $(this).val();
});

Если oldValue и newValue одинаковы, значит, не проверено.