我正在使用我在这些板上找到的一个很好的简短的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;
}
Run Code Online (Sandbox Code Playgroud)
显然我使用类似的复选框.像魅力一样工作,但遗憾的是在IE8中却无法应对:checked属性.
我试图用jquery解决这个问题,检测是否检查了radiobutton,然后添加一个"已检查"类并为其分配相同的CSS.
$('input[type="radio"],input[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
$(this).addClass('checked');
}
else {
$(this).removeClass('checked');
}
});
Run Code Online (Sandbox Code Playgroud)
不幸的是,虽然我发现许多帖子说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');
});
Run Code Online (Sandbox Code Playgroud)
添加红色背景进行测试.他们工作,addClass不....任何好主意?
---------- UPDATE 08-07 …