建立开关按钮之间的关系

Question

伙计们，我正在尝试建立开关之间的关系 buttons.Each 按钮代表一个设备。例如，如果我关闭 x 设备，它将关闭 y 和 z。但如果 y 关闭，它会变成更多。我尝试使用 switch case 语句，但我的代码变得混乱。我试图找到 if is a javascript library 但没有结果。有什么想法吗？

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

将 id 添加到所有依赖复选框作为 class。
在 "controlling" 复选框的 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>

建立开关按钮之间的关系

Building relations between switch buttons

html

javascript

relationship