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

Answer 2

I recommend you look upquerySelectorAll

 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; 

Answer 3

in JavaScript you'll use the getElementsByClassName() method. You'll have to add a class to all of your checkboxes, alternatively you can use getElementsByTagName() to target the checkbox tags.

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

then iterate thru the class with JavaScript

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.)

Hope this helps, good luck!