How to use If Else correctly

4

I have the following checkboxes :

<input type="checkbox" class="check"  id="livros" value="livros"/>
<input type="checkbox" class="check" id="folhas" value="folhas"/>
<input type="checkbox" class="check" id="porta" value="porta"/>

 <a href="#" class="botao" onclick="Avaliar_checkbox()">Avaliar</a>

I need to compare them according to what the user chooses:

function Avaliar_checkbox() {

    // Variáveis 
     var livros = document.getElementById("livros");
     var folhas = document.getElementById("folhas");
     var porta = document.getElementById("porta");


// Variáveis 
if (livros.checked) {
        alert('livros');
     }
if (folhas.checked) {
        alert('folhas');
     }
if (porta.checked) {
        alert('porta');
     }
if (livros.checked && porta.checked) {
        alert('Livros e Porta');
     }
if (livros.checked && folhas.checked && porta.checked) {
        alert('Livros, folhas e porta');
     }
}

The problem is that when I run the function, conditions conflict, I get two results, or they do not return anything. What would be the right way to do this?

    
asked by anonymous 21.02.2017 / 00:16

2 answers

3

I think this is what you want. If each option is mutually exclusive it needs to be evaluated as a single structure, executing one of them, it does not perform the other ones. This is actually obtained with else .

But you also have to put the more restrictive options up front. That is, the option that needs to have more true conditions must come before the other simpler ones. If you do not do this you have only one option run and if other options have been linked they will not run.

I do not know if it was the intention or forgot that there are other possibilities of combinations of having two checkboxes linked.

function Avaliar_checkbox() {
    var livros = document.getElementById("livros");
    var folhas = document.getElementById("folhas");
    var porta = document.getElementById("porta");
    if (livros.checked && folhas.checked && porta.checked) {
        alert('Livros, folhas e porta');
    } else if (livros.checked && porta.checked) {
        alert('Livros e Porta');
    } else if (livros.checked) {
        alert('livros');
    } else if (folhas.checked) {
        alert('folhas');
    } else if (porta.checked) {
        alert('porta');
    }
}
<input type="checkbox" class="check"  id="livros" value="livros"/>
<input type="checkbox" class="check" id="folhas" value="folhas"/>
<input type="checkbox" class="check" id="porta" value="porta"/>

 <a href="#" class="botao" onclick="Avaliar_checkbox()">Avaliar</a>
    
21.02.2017 / 00:33
3

You are doing the comparison incorrectly, for your case I advise you to use if-else like this:

if (livros.checked && folhas.checked && porta.checked) {
    alert('Livros, folhas e porta');
} else if (livros.checked && porta.checked) {
    alert('Livros e Porta');
} else if (livros.checked) {
    alert('livros');
} else if (folhas.checked) {
    alert('folhas');
} else if (porta.checked) {
    alert('porta');
}

First you check books, sheets and port, if both are checked, it gives alert("Livros, folhas e porta") , otherwise and if books and port are checked it sends alert , and so on, notice the use of else before if , it is it that will cause the next check to be called, but only if the previous check fails, so you do not execute alert more than necessary.

    
21.02.2017 / 00:33