see if radiobuttons or checkboxes are checked in IE8

Question

I'm using a nice short CSS-only method I found on these boards to use checkboxes and radiobuttons of my own design in an online application I'm developing.

What I do is I hide the radios and checks and show my graphics as a background in the label like so:

input[type="radio"] {
    display: none; 
}

input[type="radio"] + label {
    display: block;
    padding: 8px 4px 8px 22px;
    background: url(../img/filter-checks.png) 0 0 no-repeat;
}

input[type="radio"]:checked + label {
background-position: -30px 0;
}

Obviously I use something similar for checkboxes. Works like a charm, but unfortunately not so in IE8 which can't cope with the :checked attribute.

I'm trying to fix this with jquery by having that detect if a radiobutton is checked, then add a class "checked" and assign the same CSS to that.

$('input[type="radio"],input[type="checkbox"]').each(function() {
    if ($(this).is(':checked')) {
        $(this).addClass('checked');
    }
    else {
        $(this).removeClass('checked');
    }
});

Unfortunately, although I find many posts saying the is(':checked') thing should work in IE8, it does not do that for me. I can see the class"checked" being added or removed when I click a radiobutton in any other browser, but not in IE8.

Any solutions or alternatives to finding out if a radiobutton or checkbox is checked or not in IE8?

---------- UPDATE 08-07 9:30 -------------

After some reconsideration I completely reworked my code to specifically target radio-buttons and omit the :checked thing entirely. Now I find the REAL problem seems to be addClass does not seem to work in IE8 >(

My new jquery:

$('input[type="radio"]').click(function() {
    var radioName = $(this).attr('name');
    $(this).parent('.form-check').css('background-color', '#ff0000');
    $(this).parent('.form-check').addClass('checked');
    $('input[type="radio"][name="' + radioName + '"]').not(this).parent('.form-check').css('background-color', 'transparent');
    $('input[type="radio"][name="' + radioName + '"]').not(this).parent('.form-check').removeClass('checked');
});

The red backgrounds are added for testing. They work, the addClass does not.... any bright ideas?

---------- UPDATE 08-07 10:00 -------------

Disregard that... the IE8 developer tools are apparently not developed enough to show changes in class names on the fly. The function works but my CSS did not.

input[type="radio"]:checked + label,
.checked input[type - "radio"] + label {
background-position: -30px 0;
}

IE8 does not read the second line or the entire statement when it doesn't understand the first line that says :checked. My bad. Also, when the radio-buttons themselves have a display: none, they do not exist for IE8 and therefore can't be targetted....

Back to the drawing board.

Answer 1

The issue is that IE8 and below doesn't support CSS pseudo classes. You can get around this by using a Javascript library. I use it on most of my sites and it works wonders. It's called Selectivizr and it will let you use a ton of CSS3 pseudo classes in older versions of IE. There is a list of pseudo classes it supports on the home page. It is also available in multiple libraries, which is awesome!