JQuery checkbox object reference

Question

I have the following code (that works) to toggle an iPhone style checkbox:

            $('.iphone-style').live('click', function() {

                checkboxID      = '#' + $(this).attr('rel');

                if($(checkboxID)[0].checked == false) {
                    $(this).animate({backgroundPosition: '0% 100%'});

                    $(checkboxID)[0].checked = true;
                    $(this).removeClass('off').addClass('on');

                } else {

                    $(this).animate({backgroundPosition: '100% 0%'});

                    $(checkboxID)[0].checked = false;
                    $(this).removeClass('on').addClass('off');

                }
              });

In a different function, I would like a specific checkbox (AerialView) to be unchecked when another checkbox (PhotoStyles) is unchecked. I don't know how to correctly replace the 'this' reference with something more specific. I have the following (which doesn't work):

                if($('#PhotoStylesCheck')[0].checked == false) {

                    $('#AerialViewCheck').animate({backgroundPosition: '100% 0%'});
                    $('#AerialViewCheck')[0].checked = false;
                    $('#AerialViewCheck').removeClass('on').addClass('off');

                }

Note that I confirmed that the if statement works and the setting the checked to false also works. The visual elements of 'animate', 'removeClass', and 'addClass' do not work.

Can you show some html code or create fiddle?

arunes
– arunes

2012-03-09 06:27:52 +00:00
Commented Mar 9, 2012 at 6:27 — arunes
– arunes, Commented Mar 9, 2012 at 6:27

tusar · Accepted Answer · 2012-03-09 06:51:42Z

0

If you have the id of checkbox, then syntax for checking whether it is checked or not is :

if($('#' + id).is(":checked")) {
   // it is checked
}
else {
   // it is not checked
}

In your case you are not using the correct syntax for checking the checkbox, and also you are getting a 'true' value. OK.

Now if $('#AerialViewCheck')[0] is the checkbox element, then apply the animate, addClass, removeClass on this itself. Why you are trying to apply on $('#AerialViewCheck') ? Use like this :

$('#AerialViewCheck')[0].animate({backgroundPosition: '100% 0%'});
$('#AerialViewCheck')[0].removeClass('on').addClass('off');

answered Mar 9, 2012 at 6:51

tusar

3,4306 gold badges41 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arpi Mardirossian Over a year ago

Thanks but that doesn't work. I don't know if I am totally off ... but if you look in the original code (that works) the animate, removeClass and addClass functions reference the object (with the 'this' call). They don't reference the ID. I just don't know how to reference a specific object (AerialView in this case) from the ID when I can't call 'this'.

Collectives™ on Stack Overflow

JQuery checkbox object reference

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related