Primero quiero explicarles que hace mi codigo: al hacer click solo el input type checkbox ejecuta la funcion myfuncion y me cambia el id por una class para el div, y al final si uno refresca la página o sale de ella, el localStorage recuerda el estado de el checkbox y se ejecuta
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<input id="id-01" name="myFunction" type="checkbox" onchange="myFunction()"><div id="myDIV">This
is a DIV element.</div>
<script>
checkbox = document.getElementById('id-01')
checkbox.checked = eval(window.localStorage.getItem(checkbox.id))
checkbox.addEventListener('change', function(){
window.localStorage.setItem(checkbox.id, checkbox.checked)
})
</script>
<script>
function myFunction() {
var element = document.getElementById("myDIV");
if (element.classList) {
element.classList.toggle("mystyle");
} else {
var classes = element.className.split(" ");
var i = classes.indexOf("mystyle");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("mystyle");
element.className = classes.join(" ");
}
}
</script>
<script>
var ele = document.getElementsByName('myFunction'); var i = ele.length; for (var j = 0; j
< i; j++) {if (ele[j].checked) {myFunction();} else {}}
</script>
</body>
</html>
Mi problema? solo puedo hacerlo con un solo input checkbox, y necesito que realice lo mismo que con un input pero con 5. muchas gracias por su tiempo