-2

I have this jQuery code:

$(document).ready(function(){
    $('.checkdisplay').change(function(){
        if(this.checked)
            $('.todisplay').fadeIn('slow');
        else
            $('.todisplay').fadeOut('slow');

    });
});

This works great only if I check the .checkdisplay radio button: the div appears, but after, if i uncheck .checkdisplay radio button, the div .todisplay doesn't disappear.

Where i'm wrong? :(

EDIT:

demo: http://jsfiddle.net/Mse2L/

Mattia Del Franco
  • 385
  • 5
  • 21

4 Answers4

1

You need to test all the radios and only show on the one with the correct class

You could have used ID too

Notice I use .on("click" since change needs a blur in some browsers

Live Demo

$(function(){
  $("input[name='roomdoor']").on("click",function(){
    if ($(this).hasClass("checkdisplay") && this.checked)
        $('.todisplay').fadeIn('slow');
    else
        $('.todisplay').fadeOut('slow');
  });
});
mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

Problem is your radio button, you should use checkbox like,

Once a radio button having class checkdisplay is checked then it will be checked, how it can be unchecked

<input type='checkbox' class='checkdisplay' />
<div class='todisplay'>test</div>

Demo

Updated, try this like,

$(document).ready(function(){
    $('.radio').change(function(){// add onchange on radio class
        // check the radio has checkdisplay class or not
        if($(this).hasClass('checkdisplay') && this.checked)
            $('.todisplay').fadeIn('slow');
        else
            $('.todisplay').fadeOut('slow');
    });
});

Working demo

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
0
$(document).ready(function () {
    $('.radio').change(function () {
        if ($(this).hasClass('checkdisplay') && this.checked) $('.todisplay').fadeIn('slow');
        else $('.todisplay').fadeOut('slow');
    });
});

Demo

The problem is, you can't uncheck a radiobutton.

Cilan
  • 13,101
  • 3
  • 34
  • 51
  • @MattiaDelFranco what about disappear the box when unchecked? – Suman Bogati Feb 09 '14 at 17:04
  • This will add the event to all input fields on the page and not test the actual button checked but rely on the side effect that the one with the class is checked. Not very elegant. If he changes a type=text and the radio is checked, jQuery will try to fade it in again – mplungjan Feb 09 '14 at 17:16
  • @mplungjan Please look at the update to my answer, now it checks the type – Cilan Feb 09 '14 at 17:25
  • There is no longer any reason to check the type now you bind to the class of .radio. – mplungjan Feb 09 '14 at 17:26
  • @mplungjan ...okay, removed, so it's basically the first version of my answer... (and my first answer I provided the wrong JSFiddle) – Cilan Feb 09 '14 at 17:27
  • @SumanBogati ...it does disappear when unchecked, my first answer provided the wrong JSFiddle – Cilan Feb 09 '14 at 17:28
  • The first version had $("input") – mplungjan Feb 09 '14 at 17:29
  • @MattiaDelFranco see http://stackoverflow.com/questions/5575338/what-the-difference-between-click-and-change-on-a-checkbox to find out whether to use click or change event. – SMI Feb 09 '14 at 17:29
  • Which is why I use onclick in my answer – mplungjan Feb 09 '14 at 17:30
-1
$('.checkdisplay').click(function() {
    if( $(this).is(':checked')) {
        $(".todisplay").fadeIn('slow');
    } else {
        $(".todisplay").fadeOut('slow');
    }
});
SMI
  • 303
  • 1
  • 6
  • 22