Javascript 如何将事件处理程序分配给proto.io开/关开关？

Proto.io为开/关开关提供了一个很好的解决方案，而且非常易于使用。但是，我很难弄清楚如何在单击开关后向其添加事件处理程序。具体来说，我要问的是如何在单击开关后确定它所处的状态

我试着检查

元素复选框的状态，但使用proto.io它似乎没有改变

HTML和CSS如下所示：

$(document).ready(function() {
  var onoffswitch1 = $("#myonoffswitch");
  onoffswitch1.on("change", function() {
    if (onoffswitch1.is(":checked")) console.log("1-ON");
    else console.log("1-OFF");
  });
});

var onoffswitch2 = document.querySelector('#myonoffswitch');
onoffswitch2.addEventListener("change", function(e) {
  if (this.checked) console.log("2-ON");
  else console.log("2-OFF");
}, false);

.onoffswitch{
位置：相对；宽度：90px；
-webkit用户选择：无；-moz用户选择：无；-ms用户选择：无；
}
.onoffswitch复选框{
显示：无；
}
.ONOFF开关标签{
显示：块；溢出：隐藏；光标：指针；
边框：2px实心#999999；边框半径：20px；
}
.ONOFF开关内部{
显示：块；宽度：200%；左边距：-100%；
过渡：0秒时，边距为0.3秒；
}
.onoffswitch内部：之前，.onoffswitch内部：之后{
显示：块；浮动：左；宽度：50%；高度：30px；填充：0；线宽：30px；
字体大小：14px；颜色：白色；字体系列：投石机，Arial，无衬线；字体大小：粗体；
框大小：边框框；
}
.ONOFF开关内部：之前{
内容：“关于”；
左侧填充：10px；
背景色：#34A7C1；颜色：#FFFFFF；
}
.ONOFF开关内部：之后{
内容：“关”；
右边填充：10px；
背景色：#EEEEEE；颜色：#999999；
文本对齐：右对齐；
}
.ONOFF开关{
显示：块；宽度：18px；边距：6px；
背景：#FFFFFF；
位置：绝对；顶部：0；底部：0；
右：56px；
边框：2px实心#999999；边框半径：20px；
过渡：所有0.3秒在0秒内轻松过渡；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch内部{
左边距：0；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch开关{
右：0px；
}

---

在复选框中添加一个

onclick

事件，并选中

此项。选中

<input type="checkbox" name="onoffswitch" 
class="onoffswitch-checkbox" id="myonoffswitch" checked
onclick="alert(this.checked);">

我以这种方式处理开/关更改事件：

$("#myonoffswitch").change(function () {
    // do some stuff
});

然后，为了获得开关状态，我使用以下代码：

if ($("#myonoffswitch").is(":checked"))
     // on
else
     // off

的答案很好用，因为我最近不得不在使用和不使用
jQuery
的情况下使用它，下面是一些您可能会觉得很方便的代码片段：

使用jQuery:

$(document).ready(function() {
  var onoffswitch1 = $("#myonoffswitch");
  onoffswitch1.on("change", function() {
    if (onoffswitch1.is(":checked")) console.log("1-ON");
    else console.log("1-OFF");
  });
});

var onoffswitch2 = document.querySelector('#myonoffswitch');
onoffswitch2.addEventListener("change", function(e) {
  if (this.checked) console.log("2-ON");
  else console.log("2-OFF");
}, false);

不带jQuery:

$(document).ready(function() {
  var onoffswitch1 = $("#myonoffswitch");
  onoffswitch1.on("change", function() {
    if (onoffswitch1.is(":checked")) console.log("1-ON");
    else console.log("1-OFF");
  });
});

var onoffswitch2 = document.querySelector('#myonoffswitch');
onoffswitch2.addEventListener("change", function(e) {
  if (this.checked) console.log("2-ON");
  else console.log("2-OFF");
}, false);

演示：
$（文档）.ready（函数（）{
变量onoffswitch1=$（“#myonoffswitch”）；
onoffswitch1.on（“更改”，函数（）{
如果（onoffswitch1.is（“：checked”））console.log（“1-ON”）；
else console.log（“1-OFF”）；
});
});
var onoffswitch2=document.querySelector（'myonoffswitch'）；
onoffswitch2.addEventListener（“更改”，函数（e）{
如果（选中）console.log（“2-ON”）；
else console.log（“2-OFF”）；
}，假）
.onoffswitch{
位置：相对位置；
宽度：90px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
}
.onoffswitch复选框{
显示：无；
}
.ONOFF开关标签{
显示：块；
溢出：隐藏；
光标：指针；
边框：2个实心#999999；
边界半径：20px；
}
.ONOFF开关内部{
显示：块；
宽度：200%；
左边距：-100%；
过渡：0秒时，边距为0.3秒；
}
.ONOFF开关内部：之前，
.ONOFF开关内部：之后{
显示：块；
浮动：左；
宽度：50%；
高度：30px；
填充：0；
线高：30px；
字体大小：14px；
颜色：白色；
字体系列：投石机，Arial，无衬线；
字体大小：粗体；
框大小：边框框；
}
.ONOFF开关内部：之前{
内容：“关于”；
左侧填充：10px；
背景色：#34A7C1；
颜色：#FFFFFF；
}
.ONOFF开关内部：之后{
内容：“关”；
右边填充：10px；
背景色：#EEEEEE；
颜色：#999999；
文本对齐：右对齐；
}
.ONOFF开关{
显示：块；
宽度：18px；
利润率：6px；
背景：#FFFFFF；
位置：绝对位置；
排名：0；
底部：0；
右：56px；
边框：2个实心#999999；
边界半径：20px；
过渡：所有0.3秒在0秒内轻松过渡；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch内部{
左边距：0；
}
.onoffswitch复选框：选中+.onoffswitch标签.onoffswitch开关{
右：0px；
}