看在IE8中是否检查了单选按钮或复选框

我正在使用我在这些电路板上发现的一个很好的简短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属性。

我试图通过检测是否检查单选按钮来解决这个问题,然后添加一个类“检查”,并分配相同的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>(

我的新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。 我的错。 此外,当收音机按钮本身有一个显示:无,他们不存在的IE8,因此不能瞄准....

回到绘图板。


问题是IE8及以下版本不支持CSS伪类。 你可以通过使用Javascript库来解决这个问题。 我在我的大多数网站上使用它,它可以创造奇迹。 这就是所谓的Selectivizr,它可以让你在早期版本的IE中使用大量的CSS3伪类。 有一个它在主页上支持的伪类的列表。 它也可以在多个库中使用,非常棒!


改变你的CSS风格,如IE8以下

input[type="radio"][checked] + label
{
background-position: -30px 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');
});
链接地址: http://www.djcxy.com/p/14581.html

上一篇: see if radiobuttons or checkboxes are checked in IE8

下一篇: Facebook iOS SDK: How to handle SKIP button when requesting publish