简体   繁体   中英

Building relations between switch buttons

Guys i am trying to make relations between switch buttons.Each button represents a device. For example, if i turn off x device it will turn off y and z. But in case y is off it will turn couple more. I tried with switch case statement but my code is getting messy. I tried to find if is a javascript library but with no results. Any 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 the id to all the dependend checkboxes as class .
And on change of the "controlling" checkbox get all the dependend checkboxes and set the checked state accordingly.

Something like this:

 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> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM