建立开关按钮之间的关系

Building relations between switch buttons

本文关键字：关系 之间 按钮 开关 建立      更新时间：2023-09-26

伙计们，我正试图使开关按钮之间的关系。每个按钮代表一个设备。例如，如果我关闭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>

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

相关文章：