Javascript CSS切换开关（复选框）值始终打开/选中_Javascript_Html_Css_Dom Events_Uiswitch

Javascript CSS切换开关（复选框）值始终打开/选中

javascript html css

Javascript CSS切换开关（复选框）值始终打开/选中,javascript,html,css,dom-events,uiswitch,Javascript,Html,Css,Dom Events,Uiswitch,我刚刚在CSS中将复选框设置为切换开关，效果很好。但是，输入值在onchange事件上似乎没有变化，并且总是在上显示 JS代码： /*开关-滑块周围的框*/ .开关{ 位置：相对位置；显示：内联块；宽度：60px；高度：34px； } /*隐藏默认HTML复选框*/ .开关输入{ 不透明度：0；宽度：0；身高：0； } /*滑块*/ .滑块{ 位置：绝对位置；光标：指针；排名：0；左：0；右：0；底部：0；背景色：#ccc； -webkit转换：.4s；过渡：.4s；

我刚刚在CSS中将

复选框

设置为

切换开关

，效果很好。但是，输入值在

onchange

事件上似乎没有变化，并且总是在

上显示
JS代码：

/*开关-滑块周围的框*/
.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
/*隐藏默认HTML复选框*/
.开关输入{
不透明度：0；
宽度：0；
身高：0；
}
/*滑块*/
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196F3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}

工作示例：
使用checked属性确定复选框状态，然后基于该状态指定一个值
JS
HTML
在一行中，它是特定于浏览器的。
复选框已选中属性，您可以通过该属性区分是否选中（开/关）/（真/假）。
如果要打印其他内容而不是“ON”，请添加value='true'value='passed value'属性，该属性将始终打印true或passed value
<input type="checkbox" onchange="console.log(this.checked)">



<html>

  <head>
  </head>

  <body>
    <center>
      <label class="switch">
        <input id="checkbox1" type="checkbox">
        <span class="slider round"></span>
      </label>
    </center>
  </body>

</html>

<input type="checkbox" onchange="console.log(this.checked)">