撥動開關回到關閉

Question

我試圖創建一個 function 將撥動開關恢復為關閉狀態。 我正在用我的開關打開或關閉燈，但是有一個按鈕，如果我按下它，我希望所有的燈都關閉並且開關轉到“關閉”如您所見，有 4 個開關和一個按鈕關閉一切。 我想知道如何在 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>

Answer 1

我在這里為您創建了一個示例應用程序。 https://codesandbox.io/embed/lucid-brook-q6qsq

這個想法是使用document.querySelectorAll並遍歷所有復選框並取消選中它們。 以下是相關代碼：

document.querySelector("#stop").addEventListener("click", () => {
  const switches = document.querySelectorAll(".switch input");
  for (let s of switches) {
    s.checked = false;
  }
});

Answer 2

我建議您查找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>

古代瀏覽器的替代代碼

var chks = document.querySelectorAll(".switch input[type=checkbox]"); 
for (var i=0;i<chks.length;i++) chks[i].checked = false; 

Answer 3

在 JavaScript 中，您將使用getElementsByClassName()方法。 您必須將 class 添加到所有復選框，或者您可以使用getElementsByTagName()來定位復選框標簽。

let switches = document.getElementsByClassName("checkboxClass");

然后使用 JavaScript 遍歷 class

for (let i = 0; i < switches.length; i++) {
  switches[i].checked = false;
} 

這將使它們全部關閉。 您可以將其放入 function 並隨時調用它（ onclick / onchange等）

希望這有幫助，祝你好運！