How to use If Else correctly

Question

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>

and need to compare them according to what the user choose:

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, the conditions conflict, return me two results or return nothing. What would be the right way to do it?

Answer 1

You are making the comparison incorrectly, for your case I advise using if-else thus:

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 door, if both are checked, it gives the alert("Livros, folhas e porta"), otherwise and if books and door are checked he sends the alert, and so on, notice the use of else before the if, is it that will cause the next check to be called, but only if the previous one fails, so you do not run the alert more than necessary.

Answer 2

I think this is what you want. If each option is mutually exclusive they need to be evaluated as a single structure, executing one of them, does not perform the other following. This is in fact obtained with the else.

But you also need to put the more restrictive options in front of you. That is, the option that needs to have more true conditions should come before the other simpler ones. If you do not do this the one that has only one option executes and if other options have been linked will not be executed.

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

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>

I put in the Github for future reference.