Блог

Главная - Вопросы по программированию - Как вернуть переключатель с помощью javascript

Как вернуть переключатель с помощью javascript

#javascript #html #jquery #css

Вопрос:

Я пытаюсь создать кнопку переключения. Вот код: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch

В моем коде javascript — я прочитал значение «флажок». Если значение равно true, то я добавляю еще один div, и у этого другого div также есть кнопка закрытия. Когда нажата кнопка закрытия, я удаляю этот недавно добавленный div из dom.

Пока все это работает нормально.

Я также хочу переключить кнопку назад. Я устанавливаю значение false в следующей строке:

 document.getElementsByName("addUserConfirmation").checked = false;

Он действительно устанавливает значение false, но кнопка переключения по-прежнему остается синей. Как мне снова отключить его?

Вот фрагмент кода:

 function removeCardRevertToggleButton(button, container) {
    var parentContainer = document.getElementById(container);
    jQuery(parentContainer).children().remove();
    document.getElementsByName("addConfirmation").checked = false;
}

<div class="boxStyle">
    <span class="closeButton" requestid="" onclick="removeCardRevertToggleButton(this, amp;quot;inviteContainerContextamp;quot;)">×</span>
</div>

Вот jsfiddle:

https://jsfiddle.net/u9y2w8ev/15/

Когда нажата кнопка «Закрыть» («x»), я хочу переключить переключатель в положение » выкл.».

Комментарии:

1. похоже, это как-то связано с тем, что CSS не обновляется, хотя значение изменилось.

2. Да, я думаю, что он использует». слайдер:до». Как мне установить псевдоэлемент. Как мне вернуть его обратно?

3. Если нет особой ситуации, требующей использования Javascript, я могу только рекомендовать вам сделать это с помощью CSS. codepen.io/iamturner/pen/xVezWr

4. можете ли вы поделиться jsfiddle или codepen или чем-нибудь, что я мог бы отладить и помочь вам с запросом? В идеале это должно работать именно так w3schools.com/howto/tryit.asp?filename=tryhow_css_switch , если весь код идеально добавлен 🙂

5. Обновил свой пост ссылкой на jsfiddle.

Ответ №1:

document.getElementsByName("addConfirmation") возвращает массив (элементы). Вам нужно получить доступ к элементу массива, подобному этому document.getElementsByName("addUserConfirmation")[0].checked 

 function removeCardRevertToggleButton(button) {
  document.getElementsByName("addUserConfirmation")[0].checked = false;

} 
 .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.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: #2196F3;
}

input:focus .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
} 
 <body>

  <label class="switch">
  <input type="checkbox" name="addUserConfirmation" checked>
  <span class="slider round"></span>
</label>

  <div class="boxStyle">
    <span class="closeButton" onclick='removeCardRevertToggleButton(this)'>×
    </span>
  </div>

</body>

Ответ №2:

Я обновил скрипку как https://jsfiddle.net/k086xnpd/

     HTML Code:
    <body>

     <label class="switch">
       <input type="checkbox" id="test" name="addUserConfirmation" checked>
       <span class="slider round"></span>
     </label>

    <div class="boxStyle">
     <span class="closeButton"  onclick='removeCardRevertToggleButton(this)'>×
     </span>
    </div>

   </body>
 
 JS Code:
    function removeCardRevertToggleButton(button) {
    alert("Clicked, new value = "   button.checked);
    //var parentContainer = document.getElementById(container);
    //jQuery(parentContainer).children().remove();

    document.getElementById("test").checked = false;
    document.getElementById("test").addClass('slider:before');
}

Надеюсь, это то, что вы искали 🙂

Метки: