sehen, ob Radiobuttons oder Checkboxen in IE8

Question

sind Ich verwende eine nette kurze CSS-only-Methode, die ich auf diesen Boards zu Kontrollkästchen und Radiobuttons meines eigenen Designs in einer Online-Anwendung, die ich entwickeln, zu verwenden.

Was ich tue, ist ich die Radios und Kontrollen verstecken und meine Grafik als Hintergrund auf dem Etikett zeigen wie 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; 
} 

Offensichtlich verwende ich etwas ähnliches für Kontrollkästchen. Funktioniert wie ein Zauber, aber leider nicht so im IE8, der mit dem Attribut: checked nicht umgehen kann.

Ich versuche, dies mit jquery zu beheben, indem Sie erkennen, ob ein Radiobutton aktiviert ist, dann fügen Sie eine Klasse "überprüft" hinzu und weisen Sie das gleiche CSS zu.

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

Leider, obwohl ich viele Beiträge sagen, das finden (‚: checked‘), was sollte in IE8 arbeitet, tut sie das nicht für mich. Ich kann sehen, dass die Klasse "überprüft" hinzugefügt oder entfernt wird, wenn ich auf einen Radiobutton in einem anderen Browser klicke, aber nicht in IE8.

Gibt es Lösungen oder Alternativen, um herauszufinden, ob ein Radiobutton oder ein Kontrollkästchen in IE8 aktiviert ist oder nicht?

---------- UPDATE 07.08 09.30 -------------

Nach einiger erneuten Überprüfung ich meinen Code ganz speziell Radio gezielt nachbearbeitet -Knöpfe und lassen Sie das: überprüfte Ding vollständig weg. Jetzt finde ich das eigentliche Problem addClass scheint nicht in IE8 arbeiten> (

Mein neues jquery zu sein scheint.

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

Die roten Hintergründe hinzugefügt werden, zum Testen Sie arbeiten, funktioniert die addClass nicht. ... alle guten Ideen?

---------- UPDATE 07.08 10.00 -------------

Mißachtung, dass ... Die IE8-Entwicklertools sind anscheinend nicht so weit entwickelt, dass Änderungen in Klassennamen im laufenden Betrieb angezeigt werden können. Die Funktion funktioniert, aber mein CSS hat das nicht.

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

IE8 nicht liest die zweite Zeile oder die gesamte Anweisung, wenn es nicht die erste Zeile nicht versteht, der sagt: geprüft. Mein Fehler. Auch wenn die Radio-Tasten selbst eine Anzeige haben: keine, sie existieren nicht für IE8 und können daher nicht anvisiert werden ....

Zurück zum Zeichenbrett.

Answer 1

Das Problem ist, dass IE8 und darunter keine CSS-Pseudoklassen unterstützt. Sie können dies umgehen, indem Sie eine Javascript-Bibliothek verwenden. Ich benutze es auf den meisten meiner Websites und es wirkt Wunder. Es heißt Selectivizr und es können Sie eine Tonne von CSS3 Pseudoklassen in älteren Versionen von IE verwenden. Es gibt eine Liste von Pseudoklassen, die auf der Homepage unterstützt werden. Es ist auch in mehreren Bibliotheken verfügbar, was großartig ist!

Answer 2

Ihre CSS-Stil ändern wie folgt für den Internet Explorer 8

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

Answer 3

Wenn Sie nicht die Klassen für IE8 hinzufügen können, nur die CSS-Änderungen in jquery direkt machen, z.B.:

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