【发布时间】：2019-03-20 15:20:12
【问题描述】：
我正在构建一个需要通过网络浏览器打开或关闭电源的应用程序。我有一个切换按钮工作，但在“关闭”时，我想要一些验证。切换按钮是通过复选框方法创建的。
如何添加验证，如果用户单击“确定”，则电源关闭，但在“取消”时，不应取消选中复选框？
function myFunction() {
var checkBox = document.getElementById("myCheck");
var X = 0;
if (checkBox.checked == true) {
X = 1;
alert("power on " + X); // only for test
};
if (checkBox.checked == false) {
// alert("power off" );
return confirm("This will shutdown power!. Are you sure?")
if ($(X = 1))
return true;
// ('.myCheck').prop('unchecked')
// ('#switch-input').prop('checked', true);
// $(checkBox.prop('checked', true);
else
return false;
};
}/* Toggle switch Flat
==========================*/
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing: content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing: content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing: content-box;
}
.switch-label:before,
.switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing: content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked~.switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked~.switch-label:before {
opacity: 0;
}
.switch-input:checked~.switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked~.switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Switch Flat
==========================*/
.switch-flat {
padding: 0;
background: #FFF;
background-image: none;
}
.switch-flat .switch-label {
background: #FFF;
border: solid 2px #eceeef;
box-shadow: none;
}
.switch-flat .switch-label:after {
color: #0088cc;
}
.switch-flat .switch-handle {
top: 6px;
left: 6px;
background: #dadada;
width: 22px;
height: 22px;
box-shadow: none;
}
.switch-flat .switch-handle:before {
background: #eceeef;
}
.switch-flat .switch-input:checked~.switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-flat .switch-input:checked~.switch-handle {
left: 72px;
background: #0088cc;
box-shadow: none;
}
/* Transition
============================================================ */
.switch-label,
.switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}<html>
<head>
<meta charset="utf-8">
<title> My Toggle Demo</title>
<!--link href="css/css.css" rel="stylesheet" type="text/css"-->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h2>Toggle Button Example</h2>
<label class="switch switch-flat">
<input class="switch-input" type="checkbox" id="myCheck" onclick="myFunction()" />
<span class="switch-label" data-on="Power On" data-off="Power Off"></span>
<span class="switch-handle"></span>
</label>
</body>
</html>【问题讨论】：
-
if ($(X = 1))没有意义。你想在那里做什么？ -
return confirm("This will shutdown power!. Are you sure?")之后不会运行任何内容，因此请保存答案