如何使用 javascript 恢复切换按钮

Question

我正在尝试创建一个切换按钮。 这是代码： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch

在我的 javascript 代码中 - 我读取了“复选框”值。 如果该值为 true，那么我添加另一个 div，这个另一个 div 也有一个关闭按钮。 当点击关闭按钮时，我从 dom 中删除了这个新添加的 div。

到目前为止，这一切都很好。

我也想切换回按钮。 我正在使用以下行将值设置为 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, &quot;inviteContainerContext&quot;)">×</span>
</div>

这是jsfiddle：

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

单击关闭（'x'）按钮时，我想将切换按钮切换为关闭。

Answer 1

document.getElementsByName("addConfirmation")返回一个数组 (Element s )。 您必须访问这样的数组元素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>

Answer 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');
}

希望这就是你要找的:)

如何使用 javascript 恢复切换按钮

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-06-01 07:14:59

解决方案2
0 2021-06-01 07:10:18

如何使用 javascript 恢复切换按钮

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-06-01 07:14:59

解决方案2 0 2021-06-01 07:10:18

解决方案1
1 已采纳 2021-06-01 07:14:59

解决方案2
0 2021-06-01 07:10:18