Javascript 向复选框开关添加文本

我正试图做一个开关，根据它的状态显示文本

我将代码简化为：

开关{
位置：相对位置；
显示：内联块；
/*（滑块宽度*2+左）*/
宽度：72px；
高度：34px；
}
.滑块{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
}
.滑块：之前{
/*这是白色的盒子*/
位置：绝对位置；
内容：“；
高度：26px；
宽度：32px；
左：4px；
底部：4px；
背景色：白色；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：选中+。滑块：之前{
转化：translateX（32px）；
/*必须与滑块宽度相同*/
}

---

您需要添加一个选择器，用于选择是否选中输入，以仅显示相关标签。实际上，你已经有了改变颜色的方法

只需在CSS中添加以下内容：

input:checked + .slider:after {
   content:"Off";
} 
input:not(:checked) + .slider:before {
   content:"On";
}

：not

选择器只是对下一条语句求反，因此在未检查输入时。然后，您可以在此处进一步设置文本样式

如果使用JQuery

$('input[type=checkbox]').change(function(){
   var labelStr = this.attr('checked') ? 'On' : 'Off';
   $('slider').attr('data-content', labelStr);
});

还有你的CSS

.slider:after {
    content: attr(data-content)
}