如何使用javascript还原切换按钮_Javascript_Html_Jquery_Css

如何使用javascript还原切换按钮

javascript html jquery css

如何使用javascript还原切换按钮,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我正在尝试创建一个切换按钮。代码如下：在我的javascript代码中，我读取“checkbox”值。如果该值为true，那么我添加另一个div，这个另一个div也有一个close按钮。当按下关闭按钮时，我从dom中删除这个新添加的div 到目前为止，一切正常我还想切换回按钮。我使用以下行将值设置为false： document.getElementsByName("addUserConfirmation").checked = false; 它确实将该值设置为fals

我正在尝试创建一个切换按钮。代码如下：

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

到目前为止，一切正常

我还想切换回按钮。我使用以下行将值设置为false：

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

它确实将该值设置为false，但切换按钮仍保持蓝色。如何将其设置回off

以下是代码片段：

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>

函数removeCardRevertToggleButton（按钮，容器）{
var parentContainer=document.getElementById（容器）；
jQuery（parentContainer）.children（）.remove（）；
document.getElementsByName（“addConfirmation”）.checked=false；
}
×

以下是JSFIDLE：

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

我已将小提琴更新为

希望这就是您正在寻找的：）

文档。getElementsByName（“addConfirmation”）

返回一个数组（Elements）。您必须访问这样的数组元素

document.getElementsByName（“addUserConfirmation”）[0]。已选中

功能removeCardRevertToggleButton（按钮）{
document.getElementsByName（“addUserConfirmation”）[0]。选中=false；
}
开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
.开关输入{
不透明度：0；
宽度：0；
身高：0；
}
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196F3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}

×
看起来这与CSS没有更新有关，尽管值已更改。是的，我认为它使用了“.slider:before”。如何设置伪元素。如果没有需要使用Javascript的特殊情况，我只能建议您使用CSS。您可以分享JSFIDLE或codepen或任何我可以调试并帮助您进行查询的内容吗？理想情况下，如果所有代码都添加得很好，它应该完全像这样工作：）使用JSFIDLE链接更新了我的帖子。
    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');
}