кнопка переключения с проверкой

Question

Я создаю приложение, в котором необходимо включить или отключить питание через веб-браузер. У меня работает тумблер, но при выключенном состоянии мне нужна проверка. Кнопка переключения создается методом флажка.

Как добавить подтверждение, что если пользователь нажимает «ОК», питание отключается, но при «Отмена» флажок не должен быть снят?

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>

Answer 1

Проблема в том, что когда запускается обработчик событий, флажок уже снят, поэтому, когда вы 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>