[英]toggle switch back to off
I trying to create a function which reverts toggle switches back to off.我试图创建一个 function 将拨动开关恢复为关闭状态。 I'm turning a light on or off with my switch but there is a button and if i press that I want all the lights to turn off and the switches to turn to 'off' As you can see there are 4 switches and a button to shut everything down.
我正在用我的开关打开或关闭灯,但是有一个按钮,如果我按下它,我希望所有的灯都关闭并且开关转到“关闭”如您所见,有 4 个开关和一个按钮关闭一切。 And I'm wondering how I can communicate between HTML, CSS and JS
我想知道如何在 HTML、CSS 和 JS 之间进行通信
<label class="switch">
<input type="checkbox" name="one" id="one">
<span class="slider round">
</span> </label>
<label class="switch">
<input type="checkbox" name="two" id="two">
<span class="slider round">
</span> </label>
<label class="switch">
<input type="checkbox" name="three" id="three">
<span class="slider round">
</span> </label>
<label class="switch">
<input type="checkbox" name="four" id="four">
<span class="slider round">
</span> </label>
<br>
<input type="button" id="stop" value="Stop All" onclick="shutdown()"><br>
I have created an example app for you here.我在这里为您创建了一个示例应用程序。 https://codesandbox.io/embed/lucid-brook-q6qsq
https://codesandbox.io/embed/lucid-brook-q6qsq
The idea is to use document.querySelectorAll
and iterate over all the checkboxes and uncheck them.这个想法是使用
document.querySelectorAll
并遍历所有复选框并取消选中它们。 Here is the relevant code:以下是相关代码:
document.querySelector("#stop").addEventListener("click", () => {
const switches = document.querySelectorAll(".switch input");
for (let s of switches) {
s.checked = false;
}
});
I recommend you look upquerySelectorAll我建议您查找querySelectorAll
window.addEventListener("load", function() { document.getElementById("stop").addEventListener("click", function() { [...document.querySelectorAll(".switch input[type=checkbox]")].forEach(function(chk) { chk.checked = false; // and perhaps add chk.onchange() if needed }); }); });
.switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */.switch input { opacity: 0; width: 0; height: 0; } /* The slider */.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%; }
<label class="switch"> <input type="checkbox" name="one" id="one"> <span class="slider round"> </span> </label> <label class="switch"> <input type="checkbox" name="two" id="two"> <span class="slider round"> </span> </label> <label class="switch"> <input type="checkbox" name="three" id="three"> <span class="slider round"> </span> </label> <label class="switch"> <input type="checkbox" name="four" id="four"> <span class="slider round"> </span> </label> <br> <input type="button" id="stop" value="Stop All" /><br>
Alternative code for ancient browsers古代浏览器的替代代码
var chks = document.querySelectorAll(".switch input[type=checkbox]");
for (var i=0;i<chks.length;i++) chks[i].checked = false;
in JavaScript you'll use the getElementsByClassName()
method.在 JavaScript 中,您将使用
getElementsByClassName()
方法。 You'll have to add a class to all of your checkboxes, alternatively you can use getElementsByTagName()
to target the checkbox tags.您必须将 class 添加到所有复选框,或者您可以使用
getElementsByTagName()
来定位复选框标签。
let switches = document.getElementsByClassName("checkboxClass");
then iterate thru the class with JavaScript然后使用 JavaScript 遍历 class
for (let i = 0; i < switches.length; i++) {
switches[i].checked = false;
}
this will turn them all off.这将使它们全部关闭。 you can put this in a function and call it whenever (
onclick
/ onchange
, etc.)您可以将其放入 function 并随时调用它(
onclick
/ onchange
等)
Hope this helps, good luck!希望这有帮助,祝你好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.