javascript - 通过js更改切换按钮
问题描述
我让这段代码制作一个按钮并从服务器获得一些价值。
然后在加载(初始化视图)时我得到值 = 1,我需要自动打开拨动开关。
代码如下
var value = 1;
.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2ab934;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}
<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="bit00_3" value="off" onclick="toggle(this);">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div>
所以我需要一些 javascript 来使 js 中的值 1 来打开按钮。以编程方式,如果 0 关闭。
我只需要在初始化视图上使用它
解决方案
首先,您在同一个 html 页面中有 2 个 id,我已将输入更改为checkbox1
.
其次,toggle
至少在示例中,该功能不存在且未被使用,因此我将其删除。
第三,我删除了您输入的值,因为您没有使用它,如果您想获取该值,只需使用document.getElementById("checkbox1").checked
或仅使用checkbox1.checked
(将复选框分配给 var)
只需调用checkbox1.checked = {0 for unchecked and 1 for checked}
或仅调用checkbox1.checked
(将复选框分配给 var)
obs:我没有使用jquery,因为我不知道您是否在此页面上使用
var value = 1;
//you can put the checkbox in a variable,
//this way you do not need to do a javascript query every time you access the value of the checkbox
var checkbox1 = document.getElementById("checkbox1")
checkbox1.checked = value
document.getElementById("checkbox1").addEventListener("change", function(element){
console.log(checkbox1.checked)
});
.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}
<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="checkbox1">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div>
推荐阅读
- android - @Qualifier 原因:字段注入时 [Dagger/MissingBinding]
- php - 如何检查当前日期是否在指定日期前一个月内
- android - 如何修复 PhoneGap Build 应用程序的“未安装应用程序”错误?
- java - 从数据库中正确检索多个值,java手机应用程序---php本地服务器
- d3.js - 新手 d3.SelectAll("g") - 有效,但没有“g”元素
- javascript - 我在过滤搜索时做错了什么
- acid - 使用 delta Lake 表作为对另一个变化的 delta 表的查找
- python - 使用 Python 脚本在 Power BI 中创建新列
- java - 我的 Eclipse 项目中是否需要 iml、iws ipr 文件?
- asp.net-core - Netcore 2.2 本地化路由 - 始终忽略默认区域性的路由值