Question

here’s my code :

$('#retouche_a_faire').click(function() {
$("#retouche_a_faire_alert").toggle(this.checked);
});

It’s working great. Basicly, it’s a function that makes a div appear when the “retouche_a_faire” checkbox is checked, and disapear when it’s not. But I would like to use the fadeToggle option instead of toggle. How can I make this work?

I tried :

$('#retouche_a_faire').click(function() {
$("#retouche_a_faire_alert").fadeToggle(this.checked);
});

But it’s not working, since I need to set the duration and easing I think…but I need to use “this.checked” in the parantheses too…I’m a bit confused.

Thank you!

Answer 1

http://jsfiddle.net/a6Dkw/4/

In this case you don’t want to use fadeToggle() unless you know for a fact it will start out as display:none, it is much safer to test to see if it is checked. Also if you are using jQuery 1.7.2, you can use .on('click') and .prop()

$('#retouche_a_faire').on('click', function() {
    if ($(this).prop('checked')) {
        $("#retouche_a_faire_alert").fadeIn();
    }
    else {
        $("#retouche_a_faire_alert").fadeOut();
    }
});​