Marco Song Marco Song - 3 months ago 22
Javascript Question

JQuery: fadeToggle() works in a wrong way

I have two checkboxes with id


'check1' , 'check2'


two table columns with class


'column1', 'column2'


.

In js file

$(document).ready(function() {
$('.column1').hide();
$('.column2').hide();


$('#check1').change(function() {
$('.column1').fadeToggle();
});

$('#check2').change(function() {
$('.column2').fadeToggle();
});
});


When check1 is checked column shows, then hides when unchecked.
The problem is when check2 is checked column hides, and show when unchecked.

They are code in the same way but works in different way.
What causes the problem, how to fix it? Thanks.

Answer

Try this alternative:

$('#check2').click(function(){
    if($(this).is(':checked')) {
        $('.column2').fadeIn('slow');

    } else {
        $('.column2').fadeOut('slow');   
    }
});