Question

I am using jQuery to customize some radio buttons. I have two different radio button stylings so you will see two if statements looking for those two different classes.

The problem I’m running into CONSTANTLY, is that the script works perfectly in EVERYTHING but Internet Explorer. The company I work for, sadly, has denoted IE8 the industry standard for all websites, so everything that goes out HAS to work with IE8.

I send to you, my code

HTML for Radio Button 1

<label class="label_radio-STD happy" for="happy3"><input id="happy3" name="q3" type="radio" value="YES"/></label>
<label class="label_radio-STD meh" for="meh3"><input id="meh3" name="q3" type="radio" value="INDIFFERENT"/></label>
<label class="label_radio-STD sad" for="sad3"><input id="sad3" name="q3" type="radio" value="NO"/></label>

HTML for Radio Button 2

<label class="label_radio" for="radio0">0<input id="radio0" name="q5" type="radio" value="0"/></label>
<label class="label_radio" for="radio1">1<input id="radio1" name="q5" type="radio" value="1"/></label>
><label class="label_radio" for="radio2">2<input id="radio2" name="q5" type="radio" value="2"/></label>

JQuery to run the whole shaz-bot

<script>
    function setupLabel() {
        if ($('.label_check input').length) {

            $('.label_check').each(function(){
                $(this).removeClass('c_on');
            });

            $('.label_check input:checked').each(function(){
                $(this).parent('label').addClass('c_on');
            });                
        };

        if ($('.label_radio input').length) {

            $('.label_radio').each(function(){
                $(this).removeClass('r_on');
            });

            $('.label_radio input:checked').each(function(){
                $(this).parent('label').addClass('r_on');
            });
        };

        if ($('.label_radio-STD input').length) {

            $('.label_radio-STD').each(function(){
                $(this).removeClass('s_on');
            });

            $('.label_radio-STD input:checked').each(function(){ 
                $(this).parent('label').addClass('s_on');
            });
        };

    };
    $(document).ready(function(){
        $('label').click(function(){
            setupLabel();
        });
        setupLabel(); 
    });
</script>

I thrown ALERTS on each IF statement, and they’ve come up good, I’ve thrown ALERTS on the EACH loops and they’ve come up good. I used to have a line of jQuery “$(‘body’).addClass(“has-js”)” as the first line of the document.ready function, but the html body NEVER had a class of has-js. I further looked at the code, and realized I didn’t need it for the code I was running. But it still bothers me that $(‘body’).addClass(“has-js”) never worked.

Could it be as simple as my javascript for IE8 is turned off?
If so, can I force it on for anyone who may have it turned off?

Answer 1

Here is the broken code from Murphy. http://jsfiddle.net/GRstu/10/

Note the CSS line in the fiddle input[type=radio]{display:none;}. That line will cause the radio button to not get checked/unchecked when the label is clicked. This is just how IE works. You will need to do a workaround to check the hidden radio when the corresponding label is clicked.

You can do that by adding a line to the click event:

$('label').click(function() {
    $(this).children("input").prop("checked", true);  //This is the key
    setupLabel();
});

Here is the jsfiddle of the solution: http://jsfiddle.net/GRstu/11/

Note that this is a similar solution and problem to that brought forward in this question:
Labels and hidden fields in Internet Explorer (and jquery)