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.

Busyness

Your second radio button doesn't have class="slide". Is that a copying error? – Nubia

Thanks for the quick reply Barmar - the second radio button doesn't have the 'slide' class because it's not involved in sliding the div into view. As for the possible duplicate question - this question is more like how I can find the unselected radio button. Thanks! – Busyness

The unselected radio buttons are all the other ones. – Nubia

I found a solution for this. Thanks a lot for your help guys! :) – Busyness

Answer 1

it should be like below

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

Hajji

That's for SETTING the property, not checking it. – Nubia

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

Beret

Thanks for the reply Magnus. I can find out it's unchecked but I need the div that became visible when it was checked to become invisible when the radio button with the 'slide' class is unchecked. The .change function doesn't seem to be able to do that. – Busyness

Is this what you are looking trying to do? jsfiddle.net/fXxsL – Beret

Answer 3

if( !$(this).is(':checked') ) // if its unchecked

Adela