带有验证的切换按钮

时间：2019-03-20 15:20:12

标签： jquery html toggle

我正在构建一个需要通过Web浏览器打开或关闭电源的应用程序。我有一个切换按钮，但是在“关闭”时，我需要一些验证。切换按钮是通过复选框方法创建的。

如何添加验证，如果用户单击“确定”，电源会关闭，但是在“取消”上，不应取消选中复选框？

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>

1 个答案:

答案 0 :(得分：0)

问题是因为当事件处理程序运行时，该复选框已被取消选中，因此当您return false时为时已晚。要解决此问题，您只需检查confirm()的结果，如果用户取消了该操作，只需将复选框重新设置为checked状态即可。

还有两点要注意。首先，对X变量的处理没有任何意义。我已从答案中删除了该逻辑，因为它与问题无关。其次，您应该避免使用on*事件属性。请改用不显眼的事件处理程序。

document.getElementById("myCheck").addEventListener('change', function(e) {
  if (this.checked) {
    console.log("power on");
  } else {
    if (!confirm("This will shutdown power! Are you sure?")) {
      this.checked = true;
    }
  };
});
.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 {
  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;
}

.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;
}
<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>

<h2>Toggle Button Example</h2>
<label class="switch switch-flat">
  <input  class="switch-input" type="checkbox" id="myCheck" />
  <span class="switch-label" data-on="Power On" data-off="Power Off"></span> 
  <span class="switch-handle"></span> 
</label>

相关问题
最新问题