How to hide multiple checkboxes at once when selecting a javascript checkbox

Asked

Viewed 238 times

1

Good afternoon, as I do to hide several checkboxes at once when selecting a javascript checkbox follows below the code

<!DOCTYPE html>
<html>
<body>

<p>Click the button to loop through a block of code as long as i is less than 10.</p>
input_188<input type="text" id="input_188" ></br>
input_190<input type="text" id="input_190" ></br>
input_189<input type="text" id="input_189" ></br>


input_806<input type="text" id="input_806" ></br>
<input type="checkbox" onclick=atPedido("colocar","a") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="A" />colocar A </br>
<input type="checkbox" onclick=atPedido("colocar","b") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="B" />colocar B </br>
<input type="checkbox" onclick=atPedido("colocar","c") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="C" />colocar C </br>
<input type="checkbox" onclick=atPedido("colocar","d") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="D" />colocar D </br>
<input type="checkbox" onclick=atPedido("colocar","e") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="E" />colocar E </br>
<input type="checkbox" onclick=atPedido("colocar","f") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="F" />colocar F </br>
<input type="checkbox" onclick=atPedido("colocar","g") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="G" />colocar G </br>
<input type="checkbox" onclick=atPedido("colocar","h") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="H" />colocar H </br>
<input type="checkbox" onclick=atPedido("colocar","i") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="I" />colocar I </br>
<input type="checkbox" onclick=atPedido("colocar","j") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="J" />colocar J </br>
<input type="checkbox" onclick=atPedido("colocar","k") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="K" />colocar K </br>
<input type="checkbox" onclick=atPedido("colocar","l") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="L" />colocar L </br>
<input type="checkbox" onclick=atPedido("colocar","m") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="M" />colocar M </br>
<input type="checkbox" onclick=atPedido("colocar","n") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="N" />colocar N </br>
<input type="checkbox" onclick=atPedido("colocar","o") class="form-checkbox" id="input_323_0" name="input_fim_pedido[]" value="O" />colocar O </br>

<input type="checkbox" onclick=atPedido("retirar","a") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="A" /> retirar A </br>
<input type="checkbox" onclick=atPedido("retirar","b") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="B" /> retirar B </br>
<input type="checkbox" onclick=atPedido("retirar","c") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="C" /> retirar C </br>
<input type="checkbox" onclick=atPedido("retirar","d") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="D" /> retirar D </br>
<input type="checkbox" onclick=atPedido("retirar","e") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="E" /> retirar E </br>
<input type="checkbox" onclick=atPedido("retirar","f") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="F" /> retirar F </br>
<input type="checkbox" onclick=atPedido("retirar","g") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="G" /> retirar G </br>
<input type="checkbox" onclick=atPedido("retirar","h") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="H" /> retirar H </br>
<input type="checkbox" onclick=atPedido("retirar","i") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="I" /> retirar I </br>
<input type="checkbox" onclick=atPedido("retirar","j") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="J" /> retirar J </br>
<input type="checkbox" onclick=atPedido("retirar","k") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="K" /> retirar K </br>
<input type="checkbox" onclick=atPedido("retirar","l") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="L" /> retirar L </br>
<input type="checkbox" onclick=atPedido("retirar","m") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="M" /> retirar M </br>
<input type="checkbox" onclick=atPedido("retirar","n") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="N" /> retirar N </br>
<input type="checkbox" onclick=atPedido("retirar","o") class="form-checkbox" id="input_323_0" name="input_exc_pedido[]" value="O" /> retirar O </br>



<p id="demo"></p>




<script>
 document.getElementById("input_323_0").style.display = 'none';

 bandeja = new Array(15);
 var alfabeto = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o"];
 var j = 0;
 while (j < 15) {
     bandeja[j] = "0";
     j++;
 }

 function atPedido(acao, pedido) {
     var j = 0;
     var i = 0;
     var text = 0;
     if (acao == "colocar") {
         while (i < 15) {
             if (bandeja[i] == pedido) {
                 j = 1;
             }
             i++;
         }
         i = 0;
         while ((i < 15) && (j == 0)) {
             if (bandeja[i] == "0") {
                 bandeja[i] = pedido;
                 j = 1;
             }
             i++;
         }
     }
     if (acao == "retirar") {
         while (i < 15) {
             if (bandeja[i] == pedido) {
                 bandeja[i] = 0;
             }
             i++;
         }   
     }

     i = 0;

     while (i < 15) {
         text += bandeja[i];
         i++;
     }
     document.getElementById("input_806").value = text;
     i = 0;
     var fim_pedido = document.getElementsByName('input_fim_pedido[]');
     var exc_pedido = document.getElementsByName('input_exc_pedido[]');

     while ((i < 15) && (acao == "colocar")) {
         exc_pedido[i].checked = !fim_pedido[i].checked;
         i++;
     }

     while ((i < 15) && (acao == "retirar")) {
         fim_pedido[i].checked = !exc_pedido[i].checked;
         i++;
     }
     i = 0;
     j = 0;
     var k = 0;
     var l = 0;
     var pag_pedido = 0;
     var t_lanche = 0,
         t_salada = 0,
         t_suco = 0;

     while ((k < 15) /*&&(j==0)*/ ) {
         while ((i < 15) && (j == 0)) {
             if (l == 14) {
                 j = 1;
                 l = 0;
                 pag_pedido = alfabeto[k];
             }
             if (bandeja[i] != alfabeto[k]) {
                 l++;
             }
             i++;
         }

         if ((pag_pedido == "a") && (t_lanche == 0)) {
             document.getElementById("input_188").value = 0;
             t_lanche = 1;
         }
         if ((pag_pedido == "b") && (t_lanche == 0)) {
             document.getElementById("input_188").value = 1;
             t_lanche = 1;
         }
         if ((pag_pedido == "c") && (t_lanche == 0)) {
             document.getElementById("input_188").value = 2;
             t_lanche = 1;
         }
         if ((pag_pedido == "d") && (t_lanche == 0)) {
             document.getElementById("input_188").value = 3;
             t_lanche = 1;
         }
         if ((pag_pedido == "e") && (t_lanche == 0)) {
             document.getElementById("input_188").value = 4;
             t_lanche = 1;
         }

         if ((pag_pedido == "f") && (t_salada == 0)) {
             document.getElementById("input_190").value = 0;
             t_salada = 1;
         }
         if ((pag_pedido == "g") && (t_salada == 0)) {
             document.getElementById("input_190").value = 1;
             t_salada = 1;
         }
         if ((pag_pedido == "h") && (t_salada == 0)) {
             document.getElementById("input_190").value = 2;
             t_salada = 1;
         }
         if ((pag_pedido == "i") && (t_salada == 0)) {
             document.getElementById("input_190").value = 3;
             t_salada = 1;
         }
         if ((pag_pedido == "j") && (t_salada == 0)) {
             document.getElementById("input_190").value = 4;
             t_salada = 1;
         }

         if ((pag_pedido == "k") && (t_suco == 0)) {
             document.getElementById("input_189").value = 0;
             t_suco = 1;
         }
         if ((pag_pedido == "l") && (t_suco == 0)) {
             document.getElementById("input_189").value = 1;
             t_suco = 1;
         }
         if ((pag_pedido == "m") && (t_suco == 0)) {
             document.getElementById("input_189").value = 2;
             t_suco = 1;
         }
         if ((pag_pedido == "n") && (t_suco == 0)) {
             document.getElementById("input_189").value = 3;
             t_suco = 1;
         }
         if ((pag_pedido == "o") && (t_suco == 0)) {
             document.getElementById("input_189").value = 4;
             t_suco = 1;
         }

         k++;
         l = 0;
         i = 0;
         j = 0;
     }    
 }

</script>

</html>

The checkbox A is hidden, I wanted to press the checkbox B and all 30 checkboxes would be hidden at once, Gradeco to whom help!

javascript html

  • " and all checkboxes would be hidden at once" - can you explain better? all, including the one that was clicked? both "put" and "remove"?

  • yes, including the one that was clicked, all 30 checkboxes

  • I don’t see the functionality you want to get... but hide them all like this: https://jsfiddle.net/35b1b1p2/ is what you’re looking for?

  • Perfect! this excerpt from code and elementary and even Generic, this feature will help me, thanks! put this as a response

1 answer

0


To hide a series of elements when one of them is clicked you can do so:

var checkboxes = [].slice.call(document.querySelectorAll('input[type="checkbox"]'));
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('click', esconder)
}

function esconder() {
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].style.display = 'none';
    }
}

jsFiddle: https://jsfiddle.net/35b1b1b1p2/

You can also save a little on Javascript and give a class to the parent element and let the CSS do the rest of the hiding logic. So:

Javascript:

document.body.addEventListener('click', function(e) {
    if (!e.target.matches('input[type="checkbox"]')) return;
    e.target.parentElement.classList.add('escolhido');
});

(used the document.body because it is the immediate parent, if you have another structure in HTML use the parent of those inputs)

CSS:

.escolhido input[type="checkbox"] {
    display: none;
}

jsFiddle: https://jsfiddle.net/35b1b1p2/1/

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.