Monitoring when a radio button is unchecked

Question

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?

If you want the "current" value of the radio button (vs the one when the HTML is loaded) then you **must** use jQuery `.val()` instead of `.attr()` , see http://stackoverflow.com/questions/8312820/jquery-val-vs-attrvalue — Adriano, Jul 07 '14 at 11:52

Brian · Accepted Answer · 2011-04-28T20:48:46.540

81

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

});

edited Apr 28 '11 at 20:48

answered Apr 28 '11 at 20:39

Brian

37,399
24
94
109

1

A more generic approach to check if the radio button is checked would be `if( $(this).is(':checked') )` , see http://stackoverflow.com/questions/2272507/find-out-if-radio-button-is-checked-with-jquery – Adriano Jul 07 '14 at 11:54
4

@AdrienBe, I don't believe that would work when monitoring the radio button collection. You need to know which one is selected. – Brian Jul 07 '14 at 15:54
This doesn't work, but the following will : `$("input:radio[name ='managerelradio']:checked").val();` see: http://stackoverflow.com/questions/7723505/get-value-from-radio-group-using-jquery – tolmark Apr 28 '16 at 16:08

Bradley Flood · Answer 2 · 2013-11-13T22:53:54.637

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.

Monitoring when a radio button is unchecked

2 Answers2

Linked

Related