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属性。

我试图通过检测是否检查了radiobutton来检测jquery，然后添加一个“已检查”的类并为其分配相同的CSS。

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

不幸的是，虽然我发现许多帖子说is（'：checked'）的东西应该在IE8中运行，但它并不适合我。当我在任何其他浏览器中单击一个单选按钮时，我可以看到添加或删除了“已检查”类，但在IE8中没有。

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

----------更新08-07 9:30 -------------

经过一番重新考虑之后，我完全重写了我的代码，专门针对单选按钮并完全省略了：检查过的东西。现在我发现真正的问题似乎是addClass似乎不适用于IE8＆gt;（

我的新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不....任何好主意？

----------更新08-07 10:00 -------------

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

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

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

回到绘图板。

Answer 1

问题是IE8及以下版本不支持CSS伪类。您可以使用Javascript库来解决这个问题。我在大多数网站上都使用它，它可以创造奇迹。它被称为Selectivizr，它将允许您在旧版本的IE中使用大量的CSS3伪类。它在主页上支持一个伪类列表。它也可以在多个库中使用，这太棒了！

Answer 2

更改您的CSS样式，如下面的IE 8

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

Answer 3

如果你不能为ie8添加类，只需在jquery中直接进行CSS更改，例如：

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

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

3 个答案: