4

Tenho os seguintes 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>

e preciso compará-los de acordo com o que o usuário escolher:

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

O problema é que quando executo a função, as condições entram em conflito, me retornam dois resultados ou não retornam nada. Qual seria a maneira correta de fazer isso?

1
  • Eu daria uma olhada em switch-case, que apesar de ser um pouco mais lento ajuda muito na legibilidade do código.
    – Ruggi
    Commented 21/02/2017 às 12:05

2 Respostas 2

4

Acho que é isto que deseja. Se cada opção é mutualmente exclusive precisa elas precisam ser avaliadas como uma estrutura só, executando uma delas, não executa as outras seguintes. Isto de fato é obtido com o else.

Mas também precisa colocar as opções mais restritivas na frente. Ou seja, a opção que precisa ter mais condições verdadeiras deve vir antes que as outras mais simples. Se não fizer isto a que tem apenas uma opção executa e se outras opções foram ligadas não serão executadas.

Não sei se era a intenção ou esqueceu que existem outras possibilidades de combinações de ter dois checkboxes ligados.

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>

Coloquei no GitHub para referência futura.

4

Você está fazendo a comparação de maneira incorreta, para o seu caso eu aconselho utilizar if-else assim:

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

Primeiro você verifica livros, folhas e porta, se ambos estiverem checados, ele dá o alert("Livros, folhas e porta"), senão e se livros e porta estiverem checados ele manda o alert, e assim por diante, repare no uso do else antes do if, é ele que vai fazer com que a próxima verificação seja chamada, mas somente se a anterior falhar, dessa forma você não executa o alert mais do que o necessário.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .