addClass and removeClass not working in Internet Explorer

jquery checkbox addclass removeclass

12,887

Solution 1

Your selector should either be $('#chkbox') if you want it to work with only one checkbox, the one with id chkbox, or it should be $('input:checkbox') if you want it to work with every checkbox.

Also, it's better to use the change event instead of the click event because the click event (theoretically) shouldn't fire if the change was made by something else than a mouse click.

Maybe try something like this:

$('input:checkbox').change(function () {
    var $this = $(this);
    if( $this.is(':checked') ) {
        $this.next('label').addClass('etykieta_wybrana');
    } else {
        $this.next('label').removeClass('etykieta_wybrana');
    }
});

See DEMO.

If it doesn't help then try to add and remove the classes manually in HTML to see if maybe the problem is not adding classes but not showing effects of adding the classes by some weird quirks mode rendering or something.

Make sure to start your HTML with something like this:

<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">

to be sure that you're always getting the most out of the IE rendering engine.

Solution 2

This selector input:#chkbox seems weird. Try #chkbox if you've got only one element with ID #chkbox (and this happens to be an <input /> field).

Also, you should probably cache the result of $('#chkbox'), e.g.:

var $chkbox = $('#chkbox');
$chkbox.click(function() {
    if ($chkbox.is(":checked")) {
        $chkbox.next("label").addClass("etykieta_wybrana");
    } else {
        $chkbox.next("label").removeClass("etykieta_wybrana");
    }
});

You could even use .toggleClass() with a switch (second arg., untested):

var $chkbox = $('#chkbox');
$chkbox.click(function() {
    $chkbox.next("label").toggleClass("etykieta_wybrana", $chkbox.is(":checked"));
});

Disclaimer
No, this does not explain why it worked in Fx, Chrome etc. and not in IE. I guess the selector implementation is somewhat different between the browsers. In general, this may not even solve the problem but only hint at potential problems (and a "cleaner" solution).

12,887

Author by

Admin

Updated on July 03, 2022

Comments

Admin almost 2 years
jQuery functions addClass and removeClass do not work properly when I use them to change the appearance of a checkbox in Internet Exploer (IE). However, they work fine in other browsers.

Here is sample code to illustrate my problem:
```
$('input:#chkbox').click(function()
    {
        //if($(this).is(":checked")){
        if($('input:#chkbox').is(":checked"))
        {
            $('input:#chkbox').next("label").addClass("etykieta_wybrana");
        }
        else
        {
            $('input:#chkbox').next("label").removeClass("etykieta_wybrana");
        }
    });
```
To further test this, you can run the code using jsFiddler (does not work in IE): http://jsfiddle.net/tejek/pZJMd/
jensgram over 13 years

ALternatively, $chkbox.checked if you're certain that it is a <input type="checkbox" />, cf. Utilize the awesome power of jQuery to access properties of an element.
V.J. almost 11 years

Thanks,Now I come to know, how to get most rendering issue fixed in IE