7

我正在使用我在这些板上找到的一种非常简短的纯 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;
}

显然我对复选框使用了类似的东西。像魅力一样工作，但不幸的是，在无法处理 :checked 属性的 IE8 中并非如此。

我正在尝试通过检测是否选中单选按钮来使用 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 -------------

经过重新考虑后，我完全修改了我的代码以专门针对单选按钮并完全省略 :checked 东西。现在我发现真正的问题似乎是 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 没有....有什么好主意吗？

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

忽略... IE8 开发人员工具显然不够发达，无法即时显示类名的变化。该功能有效，但我的 CSS 没有。

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

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

回到绘图板。

4

3 回答 3

3

问题是 IE8 及以下不支持 CSS 伪类。您可以通过使用 Javascript 库来解决此问题。我在我的大多数网站上都使用它，并且效果很好。它叫做Selectivizr，它可以让你在旧版本的 IE 中使用大量的 CSS3 伪类。主页上有一个它支持的伪类列表。它也可以在多个库中使用，太棒了！

于 2013-07-10T16:24:11.207 回答
0

更改您的 CSS 样式，如下所示为 IE 8

input[type="radio"][checked] + label
{
background-position: -30px 0;
}
于 2013-12-21T18:40:36.890 回答
0

如果不能为 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');
});
于 2014-06-23T13:33:18.113 回答