Sprawdź, czy radiobuttons lub pola wyboru są zaznaczone w IE8

Question

Używam niezłej metody tylko CSS, którą znalazłem na tych tablicach, aby używać pól wyboru i radiobutonów mojego własnego projektu w aplikacji online, którą rozwijam.

Co mogę zrobić, to ja ukryć radio i kontrole i pokazać moje grafiki jako tła w etykiecie tak:

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; 
} 

Oczywiście używam coś podobnego do wyboru. Działa jak urok, ale niestety nie tak w IE8, który nie radzi sobie z atrybutem: checked.

Próbuję naprawić to za pomocą jquery, wykrywając, jeśli jest zaznaczone radio, następnie dodaj klasę "sprawdzone" i przypisz do tego ten sam CSS.

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

Niestety, chociaż znaleźć wiele postów mówiąc jest („: sprawdzone”), co powinno działać w IE8, to nie ma to dla mnie zrobić. Widzę, że klasa "sprawdzona" jest dodawana lub usuwana po kliknięciu przycisku radiowego w dowolnej innej przeglądarce, ale nie w IE8.

Jakieś rozwiązanie lub alternatywa, aby dowiedzieć się, czy przycisk radiowy lub pole wyboru jest zaznaczone, czy nie w IE8?

---------- UPDATE 08-07 09:30 -------------

Po pewnym ponownego ja całkowicie przerobione mój kod konkretnie skierować radia -przyjmij i pomiń: wszystko sprawdzone. Teraz uważam, że prawdziwym problemem wydaje się być addClass nie wydają się działać w IE8> (

Mój nowy 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'); 
}); 

Czerwone tła są dodawane do testowania pracy oni, addClass nie. ... jakieś dobre pomysły?

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

Należy ignorować, że ... narzędzia programistów IE8 najwyraźniej nie są wystarczająco rozwinięte, aby pokazać zmiany nazw klas w locie.Funkcja działa, ale mój CSS nie.

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

IE8 nie czyta drugiej linii lub całego zdania, gdy nie rozumie pierwszej linii, która mówi: sprawdzone. Mój błąd. Również, gdy same przyciski radiowe mają wyświetlacz: brak, nie istnieją one dla IE8 i dlatego nie mogą być celowane ...

Powrót do deski kreślarskiej.

Answer 1

Problem polega na tym, że IE8 i poniżej nie obsługuje pseudo klas CSS. Możesz obejść ten problem za pomocą biblioteki JavaScript. Używam go na większości moich stron i działa cuda. To się nazywa Selectivizr i pozwoli ci użyć mnóstwa pseudo klas CSS3 w starszych wersjach IE. Istnieje lista obsługiwanych pseudo klas na stronie głównej. Jest również dostępny w wielu bibliotekach, co jest niesamowite!

Answer 2

Zmień swój styl CSS dla IE jak po 8

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

Answer 3

Jeśli nie można dodać klas dla IE8, wystarczy wprowadzić zmiany bezpośrednio CSS w jQuery, na przykład:

$('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'); 
});