选择基于CSS的Switch的当前值

Question

这可能是一个愚蠢的问题（希望不是这样）。

我现在是javascript / jQuery的新手，我遇到了以下网站，它创建了易于配置的On / Off开关：

http://proto.io/freebies/onoff/

交换机非常好，但是如何使用jQuery来确定交换机是开还是关？据我所知，实际上没有任何变化，所以没有收集的价值等。

Answer 1

该开关包含一个（隐藏的）input type="checkbox"，它是触发样式更改的元素。

使用Vanilla JavaScript或jQuery，选中复选框，看看是否已选中（JS：.checked，jQ：.prop("checked")）

Answer 2

如果您检查HTML，则会有一个基础复选框。

该复选框有一个名为checked的属性，该属性为true或false。你需要检查一下。

This little demo可能会有所帮助（请检查控制台以查看结果）。

$('.onoffswitch input').change(function () {
    console.log(this.checked);
});

Answer 3

你所看到的实际上并不是JavaScript，而是一个CSS动画。该按钮实际上是隐藏输入元素的标签，在检查标签时触发了基于CSS的动画。

要确定是否是这种情况，您可以执行以下操作：

if( $('.onoffswitch-checkbox').prop('checked') ){
    doSomething();
}