スイッチボタン間の関係の構築

Question

私はスイッチボタンの間の関係を作ろうとしています。各ボタンはデバイスを表します。たとえば、xデバイスをオフにすると、yとzがオフになります。しかし、yがオフの場合、それはもっとカップルになります。私はswitch case文で試しましたが、私のコードは面倒です。私はjavascriptライブラリが見つかったが、結果は得られなかった。何か案が？

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

スイッチボタンのサンプル：

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

Answer 1

はclassとして、すべてのdependendのチェックボックスにidを追加します。
"制御する"チェックボックスのchangeには、すべての依存チェックボックスが表示され、それに応じてcheckedの状態が設定されます。このような

何か：

document.querySelector("#control").addEventListener("change", function(e) { 
 
    var checkbox = e.target, 
 
    dependendCheckboxes = document.querySelectorAll("." + checkbox.id); 
 

 
    for (var i = 0; i < 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>