使用proto.io在IE8中打开/关闭开关

Question

Proto.io为使用CSS的开/关切换按钮提供了一个非常好的解决方案。但是，它在IE8中不起作用。 http://proto.io/freebies/onoff/

任何人都知道如何使用js修复它？或者是否有其他开启/关闭开关按钮解决方案，您建议在IE8中使用？

Answer 1

感谢您使用我们的Proto.io flipswitch :)

以下是如何使用javascript启用对IE8的支持。

你需要做的是添加css，它将改变flipswitch的状态，具体取决于“onoffswitch-checked”类，然后在点击flipswitch时使用javascript切换该类。

首先在css中添加这两个声明：

.onoffswitch-checked .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checked .onoffswitch-switch {
    right: 0px; 
}

然后，根据是否选中复选框，使用javascript切换“onoffswitch-checked”类：

$(document).ready(function(){
    $('.onoffswitch-label').click(function(){
        $(this).parent().toggleClass('onoffswitch-checked');
    });
});

此外，如果您选择了“默认启用”选项，请务必将“onoffswitch-checked”类添加到您的html中：

<div class="onoffswitch onoffswitch-checked">

注意：

使用复选框上的change（）事件而不是标签上的click（），有一种更简洁的方法来实现这一点，但遗憾的是，单击标签时IE8不会触发change（）事件而不是复选框。

最好在复选框上而不是在父对象上触发已检查的类，但是当更改类时，IE8不刷新相邻的兄弟CSS（+）:(

Answer 2

Proto.io页面提到“...... IE8不支持CSS：checked selector”所以不支持。这意味着您可以通过在IE中包含一个polyfill来解决这个问题，例如， selectivizr

编辑：Proto.io页面还提到（通过浏览器图标列表上的IE工具提示）可以通过一些添加的Javascript支持IE8。此代码在 anna.mi 的答案中提供， anna.mi 是该交换机的实际作者。