javascript - toggle switch back to off

Question

I trying to create a function which reverts toggle switches back to off. 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. And I'm wondering how I can communicate between HTML, CSS and 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

I have created an example app for you here. https://codesandbox.io/embed/lucid-brook-q6qsq

The idea is to use document.querySelectorAll and iterate over all the checkboxes and uncheck them. Here is the relevant code:

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