使用jQuery单击复选框时更改类和ID

Question

I have a checkbox on a html page which, when its checked I want to change the ID of one div and the class of another.

This is the code that I wrote to do it:

HTML:

<li><input type="checkbox" name="x" value="1" class="home6" /> Check this</li>

JQuery:

$(function(){
    if ($('.home6').is(':checked')) {
       $('.hider2').addClass('.hiderx').removeClass('.hider2');
       $('#next1').attr('id','next4');
    };
};

However this has no effect on my HTML.

I have tried debugging in the console but it throws no errors.

I don't think the event is ever getting triggered as I have tried adding an alert into the if statement, however, having read the documentation for the :checked selector but this code seams to be right.

Answer 1

You should be having a change OR click event binded to your checkbox to execute your script.

and in you code dot(.) in addClass and removeClass is incorrect

Answer 2

Try this:

<li><input type="checkbox" name="x" value="1" class="home6" /> Check this</li>

And the respective jQuery code:

$(function(){
    $('.home6').on('change', function() { 
        if($(this).is(':checked')) 
        {
            $('.hider2').addClass('hiderx').removeClass('hider2');
            $('#next1').prop('id', 'next4');
        }
    });
});

Answer 3

Try this :-

$(function(){
  $($('.home6').change(function(){
    if ($(this).is(':checked')) {
       $('.hider2').addClass('hiderx').removeClass('hider2');
       $('#next1').attr('id','next4');
    };
  };
});

Answer 4

It is working: http://jsfiddle.net/balintbako/KK2Xr/

if ($('.home6').is(':checked')) {
    $('.hider2').addClass('hiderx').removeClass('hider2');
    $('#next1').attr('id','next4');
};

How are you calling the function? You need to make that an action handler or call it on document.ready as it is in the fiddle.