How can I use jQuery/JavaScript to find out when a radio button is unchecked?

checkbox, html, javascript, jquery, radio-button

Solution

it should be like below

if( $(this).prop('checked', true) )

Problem

I am trying to use a jquery function to hide/show certain form elements when a check box is checked. The same function should also be used to hide/show form elements when a radio button is checked. The problem is with the radio buttons. My function can't tell when a radio button is unchecked so that the div that became visible when it was checked can now be hidden since it is unchecked. I have shown the code below: ``` <!-- html on one of the pages --> <fieldset> <label for="viaMail">Send offers to my mail</label> <input type="checkbox" id="viaMail" class="slide" autocomplete="off"> <label for="viaEmail">Send offers to my email address</label> <input type="checkbox" id="viaEmail" autocomplete="off"> </fieldset> <div class="viaMail"> <!-- div hidden with css using display: none rule --> <!-- input fields for mailing addresses etc --> </div> <!-- end page one html --> <!-- html on page two --> <fieldset> <label for="viaMail">Send offers to my mail</label> <input type="radio" name="group1" id="viaMail" class="slide" autocomplete="off"> <label for="viaEmail">Send offers to my email address</label> <input type="radio" name="group1" id="viaEmail" autocomplete="off"> </fieldset> <div class="viaMail"> <!-- div hidden with css using display: none rule --> <!-- input fields for mailing addresses etc --> </div> ``` ``` /* the js function */ ShowHideDiv={ init:function(){ var radcheck = $(".slide"); //if the input element has the class 'slide' then the value of it's 'id' attribute //is retrieved and the class which has the same name as the 'id' of the current input //element is hidden or slided into view - in this case the 'viaMail' class radcheck.on("change",function(){ if($(this).prop('checked')== true) { $('body').find("."+$(this).attr('id')).slideDown('slow'); } else { $('body').find("."+$(this).attr('id')).slideUp('fast'); } }); } } ``` I've tried the function for the checkboxes and it works fine. It doesn't work for the radio buttons - the div is 'slided down' into view but it doesn't disappear by 'slideUp' when the other radio button is selected. Would really appreciate your help.

Original source

Related problems