Question

This is my HTML:

<div class="sss">
    <label class="label_radio" for="radio-01">
        <input name="vtip" id="radio-01" value="50" type="radio" />
        <img src="http://www.tui-travelcenter.ro/layouts/innobyte/images/radio_50.jpg" width="199" height="241" style="display:block">
    </label>
</div>
<div class="ddd">
    <label class="label_radio1" for="radio-02">
        <input name="vtip" id="radio-02" value="100" type="radio" />
        <img src="http://www.tui-travelcenter.ro/layouts/innobyte/images/radio_100.jpg" width="199" height="241" style="display:block">
    </label>
 </div>
 <div class="clear"></div>

And this is my javascript:

$(document).ready(function () {
    $('#radio-01').change(function(){ 
        $(".label_radio").css({background: "#fff"});                           
        $(".label_radio1").css({background: "#fff"});                                   

        if($(this).is(":checked")) {                                                  
             $(".label_radio").css({background: "#000"});       
        } else {
         $(".label_radio").css({background: "#f00"}) ;          
        }
     });

     $('#radio-02').change(function(){                                 
        $(".label_radio").css({background: "#fff"});                                                          
        $(".label_radio1").css({background: "#fff"}); 

        if($(this).is(":checked")) $(".label_radio1").css({background: "#000"}); 
        else $(".label_radio1").css({background: "#fff"}) ; 
     });
 });

I have two radio buttons, that have a custom image. On click, they change their backgrounds, so you can see that it is selected. (here is live: tui-travelcenter.ro/concurs_vouchere.php – the 2 pics.)
This works just fine in Firefox, Chrome, but not in IE.

Answer 1

To make this work in IE, use $(".label_radio1").css({'background-color': "#fff"}); instead of $(".label_radio1").css({background: "#fff"}); in your code.

Do the same in all places where you call .css(..)

---

EDIT

In IE, your click event is NOT propagating UP from the img to the label, so that it affects the radio (of which it is label of) and triggers the radio’s change event. Add this code to your JS to force event propagation.

$('label img').click(function() {
    $(this).prev('input').attr('checked', true).change();
    return true;
});