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

Question

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.

Answer 1

it should be like below

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

Answer 2

You could use .is() to check for something like this.

if( $(this).is(':checked') )

More about it in the documentation.

Also, you could replace $('body').find("."+$(this).attr('id')) with just $("." + $(this).attr('id')).

Demo here

$(function () {
    $('.slide').on("change", function () {
        if ($(this).is(':checked')) {
            $("." + $(this).attr('id')).slideDown('slow');
        } else {
            $("." + $(this).attr('id')).slideUp('fast');
        }
    });
});