Show button when checking checkbox

Question

Show button when checking checkbox

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

I need to mark the checkbox submit button. But as I have more than a checkbox when clicking on the second to mark the button, I would like it to continue to appear until it has no checked.

How can I fit my code below for my needs?

<form>
 <table>
  <thead>
   <tr>
    <th></th>
   <tr>
  </thead>
  <tbody>
   <tr>
    <td><input onclick="ocultar()" type="checkbox"></td>
    <td><input onclick="ocultar()" type="checkbox"></td>
    <td><input onclick="ocultar()" type="checkbox"></td>
   </tr>
  </tbody>
 </table>
 <button type="submit" class="tiny button" id="botao">
</form>

<script>
    function ocultar() {    
        if (document.getElementById("botao").style.display == "none") { 
            document.getElementById("botao").style.display = "block";    
        } else {
            document.getElementById("botao").style.display = "none";          
        }  
    }
</script>

CSS:

#botao{
    display: none;
}

javascript html css

asked by anonymous 25.10.2018 / 18:56

2 answers

2

If your goal is to display the button only when at least one checkbox is checked, you can only do this with javascript with the help of querySelector() method with query "input[type=checkbox]:checked" .

function ocultar() {
  var marcados = document.querySelector("input[type=checkbox]:checked");
  var botao = document.getElementById("botao");  
  botao.style.display = (marcados != null) ? "block" : "none";
}

<form>
  <table>
    <thead>
      <tr>
        <th></th>
        <tr>
    </thead>
    <tbody>
      <tr>
        <td><input onclick="ocultar()" type="checkbox"></td>
        <td><input onclick="ocultar()" type="checkbox"></td>
        <td><input onclick="ocultar()" type="checkbox"></td>
      </tr>
    </tbody>
  </table>
  <button type="submit" class="tiny button" id="botao" style="display:none">Enviar</button>
</form>

25.10.2018 / 19:27

How to change background color according to value Extract XML tags C #

score 2 · Accepted Answer

You are calling the function in all checkbox and just toggling the button status to every click in checkboxes.

I made some adjustments to your code, here are some of them:

1 - I have placed a text on the button to make it visible.

2 - I added id to the button to be able to change its state through the script.

For the rest, the code is all commented, if you have any questions let me know.

//capturando evento de click e touch(mobile) em todos os checkboxs
$('input[type="checkbox"]').on('click touchstart', function(){
    //capturando a quantidade de checkboxs checados
    let quantCheck = $('input[type="checkbox"]:checked').length;
    
    /*verificando se o número de itens checados é diferente
     de zero para então mostrar o botão*/
    if(quantCheck != 0) {
        $('#botao').css('display', 'block')
    } 
    else {
        $('#botao').css('display', 'none')
    }
});

#botao{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><table><thead><tr><th></th><tr></thead><tbody><tr><td><inputtype="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
       </tr>
      </tbody>
    </table>
    <button type="submit" class="tiny button" id="botao">
    Enviar
    </button>
</form>

Note: I added the touchstart event to support the touch event on touch screens.

Event reference touchstart : link

If you prefer a method using only vanillaJS :

//capturando todos os checkboxs
checks = document.querySelectorAll('input[type="checkbox"]');

//adicionando evento de click em todos os checkboxs
checks.forEach( function(ck){
    ck.addEventListener("click", function(){
    
        //pegando a quantidade de elementos checados
        let checked = document.querySelectorAll
        ('input[type="checkbox"]:checked').length;
        
        let botao = document.getElementById('botao');
        
        // se a quantidade de elementos checados for igual a 0, então esconde o botão
        if(checked == 0){
            botao.style.display = "none";
        } else {
            botao.style.display = "block";
        } 
    });
});

#botao {
    display: none;
}

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" /> <br> <br>

<button id="botao"> Botao!</button>