0

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

1 respuesta 1

0

No sé mucho de Javascript pero se me ocurre esto, creo que solo faltaría en la funcion MyFuntion recibir según la selección, pero no se como hacerlo, actualmente escribí var element = document.getElementById("myDIV-"+i); pero no funciona:

<script>
    for (var i = 0; i < 5; i++) {
    document.body.innerHTML = "<input id=id-"+i" name=myFunction type=checkbox onchange=myFunction()><div id=myDIV-"+i">This is a DIV element "+i".</div>"
    }
</script>


<script> 

    for (var i = 0; i < 5; i++) {

        checkbox = document.getElementById('id-'+i)
         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-"+i);

             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>
2
  • muchas gracias por darle de tu tiempo a mi problema, pero no me resulto :( cuidate mucho ;)
    – Azael Jara
    Commented el 27 may. 2020 a las 3:13
  • voya tratar de ver como ayudarte, realmente nosé mucho de Javascript
    – Joe
    Commented el 27 may. 2020 a las 3:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.