查看是否在IE8中选中了radiobuttons或复选框

Question

我正在使用我在这些板上找到的一个很好的简短的CSS方法,在我正在开发的在线应用程序中使用我自己设计的复选框和单选按钮.

我所做的是隐藏收音机并检查并在标签中显示我的图形作为背景,如下所示:

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

显然我使用类似的复选框.像魅力一样工作,但遗憾的是在IE8中却无法应对:checked属性.

我试图用jquery解决这个问题,检测是否检查了radiobutton,然后添加一个"已检查"类并为其分配相同的CSS.

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

不幸的是,虽然我发现许多帖子说is(':checked')的东西应该在IE8中运行,但它并不适合我.当我在任何其他浏览器中单击radiobutton时,我可以看到添加或删除了类"已检查",但在IE8中没有.

在IE8中是否检查了无线电按钮或复选框的任何解决方案或替代方案？

---------- UPDATE 08-07 9:30 -------------

经过一番重新考虑后,我完全重新设计了我的代码,专门针对单选按钮并完全省略了:检查过的东西.现在我发现真正的问题似乎是addClass似乎在IE8中不起作用>(

我的新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');
});

添加红色背景进行测试.他们工作,addClass不....任何好主意？

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

忽略...... IE8开发人员工具显然没有足够的开发能力来显示类名的变化.该功能有效,但我的CSS没有.

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

当IE8不理解第一行:checked时,IE8不会读取第二行或整个语句.我的错.此外,当单选按钮本身有一个显示:none时,它们不存在IE8,因此无法定位....

回到绘图板.

Answer 1

问题是 IE8 及以下版本不支持 CSS 伪类。您可以使用 Javascript 库来解决这个问题。我在我的大多数网站上都使用它，效果非常好。它称为Selectivizr，它可以让您在旧版本的 IE 中使用大量 CSS3 伪类。主页上有一个它支持的伪类列表。它也可以在多个图书馆中找到，这太棒了！