Show button by having active "n" checkbox

Question

Show button by having active "n" checkbox

Navigation

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

0

I have a question and I do not know how to solve it, I want a button to appear only when I have all my active checkboxes for example 3. And that this button disappears when one, two or all are deactivated. I have the following but I think I'm wrong

$(function(){
$('.seleccionU, .seleccionD, .seleccionT').change(function(){
if(!$(this).prop('checked')){
    $('#btnOculto').hide();
}else{
    $('#btnOculto').show();
}

Being .selection U, .selectionD, .selectionT, classes in my checkboxes

<input class="seleccionU" type="checkbox"  name="option1" id="option1">
<input class="seleccionD" type="checkbox"  name="option2" id="option2">
<input class="seleccionT" type="checkbox"  name="option3" id="option3">

And this is my button

<button id="btnOculto" >
<span>Regístrate</span> </button>

I remain attentive to your comments, Thank you!

javascript jquery html

asked by Horiuko Kun 26.04.2018 в 23:19

source

2 answers

Streaming Providers Pass data from one input to another input (each input is different html)

score 0 · Answer 1

As alanfcm mentions you can use a general class for n numbers of checkboxes, in my case I would do something similar to this:

   $(function(){
        $('.opcion').change(function(){
            var showBtn = true;
            $(".opcion").each(function() {
                if($(this).is(':checked')){
                    showBtn = false;                
                }      
            });
            if (showBtn) {
                $('#btnOculto').show();
            } else {
                $('#btnOculto').hide();
            }
        });
    });

score 0 · Answer 2

You can add a general class to all the checkboxes, let's say select, and then you would do it like this:

$(function(){
$('.seleccion').change(function(){
    var cont = 0;
    $(".selection").each(function() {
        if($(this).prop('checked')){
            cont++;                
        }      
    });
    if (cont == 3) {
        $('#btnOculto').show();
    } else {
        $('#btnOculto').hide();
    }
});