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.