Show button when checking checkbox

Question

I need you to mark the checkbox the Submit button appears. However as I have more than one checkbox when clicking the second to mark the button some would like to continue appearing the button until no checked.

How can I fit my code below to my need?

<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;
}

Answer 1

You are calling the function at all checkbox and just toggle the state of the button each click at the checkpoints.

I performed some readjustments in your code, follow some of them:

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

2- I added a id button to change its state by script.

Besides, the code is all commented, in case you have any doubts, 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><input type="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>

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

Event reference touchstart: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events

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>

Answer 2

If your goal is to display the button only when at least one checkbox is checked, you can do this only with javascript with the help of the method querySelector() with the 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>