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.

Zoes

So, are you checking it in a click handler or what? – Northwester

May be $('input[type="radio"],input[type="checkbox"]') css3 selector won't work in IE 8 – Sepulveda

Does $('#yourelement').prop( 'checked' ) return true or false? – Extravasation

BTW, which jquery version are you using? – Northwester

To see if you are doing something wrong: Does this demo on the jquery site work? – Extravasation

This is driving me crazy. @roasted - It's a function that gets fired on pageload and in a click handler. I was using 1.10.1 and have now downgraded to 1.8.2 with the same results. In other news, I've completely rewritten my function to specifically target radio's not both radio's and checkboxes because I realised the functionality should be really different. I'm omitting the :checked thing entirely now for radiobuttons and found out f&^%ing addClass is not working in IE8. – Zoes

Is this just a typo in your 08-07 10:00 update or do you need to use an equals sign instead of a hyphen in your second selector for type="radio"? .checked input[type - "radio"] + label – Boris

@FakeHaak hi, I am having the same issue with display:none I was wondering if there a way to hide that ugly checkbox in ie8 – Cornstalk

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!

Impaction

IE8 has partial support for pseudo classes. – Mcloughlin

Answer 2

Change your CSS style like following for IE 8

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

Phyletic

This won't work. Browsers do not update the checked attribute when you click a checkbox/radiobutton. – Negris

Answer 3

If you can't add the classes for ie8, just make the CSS changes directly in jquery, e.g.:

$('input[type="radio"]').click(function() {

    //Reset bg and bg position of all radiobutton labels
    $('label').css('background-color', 'transparent');
    $('label').css('background-position', '0');

    //change bg and bg position of *checked* radiobutton label
    $(this).parent().css('background-color', '#ff0000');
    $(this).parent().css('background-position', '-30px 0');
});

Winfredwinfrey