javascript - Building relations between switch buttons -


guys trying make relations between switch buttons.each button represents device. example, if turn off x device turn off y , z. in case y off turn couple more. tried switch case statement code getting messy. tried find if javascript library no results. idea?

function hm1() {     var hlektro1 = document.getelementbyid("device_engine1").checked;      switch (hlektro1) {         case (hlektro1 = true):             document.getelementbyid("device_x").checked = false;             document.getelementbyid("device_1").checked = false;             document.getelementbyid("device_nautical").checked = false;             document.getelementbyid("device_2").checked = false;             break         case (hlektro1 = false):             document.getelementbyid("device_x").checked = true;             document.getelementbyid("device_1").checked = true;             document.getelementbyid("device_nautical").checked = true;             document.getelementbyid("device_2").checked = true;             break     } }  function gps() {     var gpsdevice = document.getelementbyid("device_x").checked;      switch (gpsdevice) {         case (gpsdevice = true):             document.getelementbyid("device_55").checked = false;             document.getelementbyid("device_123").checked = false;             document.getelementbyid("device_nautical").checked = false;             document.getelementbyid("device_camera").checked = false;             document.getelementbyid("device_14").checked = false;             break         case (gpsdevice = false):             document.getelementbyid("device_55").checked = true;             document.getelementbyid("device_123").checked = true;             document.getelementbyid("device_nautical").checked = true;             document.getelementbyid("device_camera").checked = true;             document.getelementbyid("device_14").checked = true;             break     } } 

sample of switch button:

<div class="onoffswitch">     <input type="checkbox" name="engine1" class="onoffswitch-checkbox" id="device_Ηλεκτρομηχανη1" checked>     <label class="onoffswitch-label" for="device_engine1" onclick="hm1()">         <span class="onoffswitch-inner"></span>         <span class="onoffswitch-switch"></span>     </label> </div> 

add id dependend checkboxes class.
, on change of "controlling" checkbox dependend checkboxes , set checked state accordingly.

something this:

document.queryselector("#control").addeventlistener("change", function(e) {    var checkbox = e.target,      dependendcheckboxes = document.queryselectorall("." + checkbox.id);      (var = 0; < dependendcheckboxes.length; i++) {      dependendcheckboxes[i].checked = checkbox.checked;    }  });
<div id="control">    <label><input type="checkbox" id="device_engine1" />device_engine1</label>    <label><input type="checkbox" id="device_x" />device_x</label>  </div>  <div>    <input type="checkbox" class="device_engine1" />    <input type="checkbox" class="device_x" />    <input type="checkbox" class="device_engine1 device_x" />  </div>


Comments