4

Como eu faço para listar os valores de checkbox quando o usuário selecionar e quando estiver não selecionado o valor não aparecer na lista?

<select class="form-control" id="list-lugar">
  <option value="0" disabled="true" selected="true">-</option>
  <option value="200">1 Shopping</option>
  <option value="200">2 Shopping</option>
  <option value="100">3 Shopping</option>
  <option value="100">4 Plaza</option>
  <option value="100">5 Shopping</option>
  <option value="100">6 Plaza</option>
</select><br><br>

<input id="add-buffet" type="checkbox" value="1000" />
<label>Buffet</label><br>
<input id="add-decoracao" type="checkbox" value="499" />
<label>Decoração</label><br>
<input id="add-foto" type="checkbox" value="800" />
<label>Foto</label><br><br>

<label>Lista</label><br><br>
item 1 R$200,00<br>
item 2 R$1.000,00<br>
item 3 R$499,00<br>
item 4 R$800,00<br>

3 Respostas 3

2

Cara fiz um exemplo aqui parecendo com o que vc quer, mostrando e escondendo as escolhas feitas pelo usuário:

$(document).ready(function() {
  $('input[type="checkbox"]').click(function() {
    var inputs = $(this);
    var valor = $(this).val();
    var label = $("label[for='" + $(this).attr('id') + "']").text();
  
      if(inputs.is(":checked") == true) {
        $("#lista").append("<span id='span'> - " + label + " : " + valor + "</span>" );
      } else {
          $("#span").remove();
      }
  });
  $("select").on("change", function() {
    var str = "";
    $("select option:selected").each(function() {	
      str += $(this).text();
    });
    $("#spanSelect").text(str);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="list-lugar">
  <option value="0" disabled="true" selected="true">-</option>
  <option value="200">1 Shopping</option>
  <option value="200">2 Shopping</option>
  <option value="100">3 Shopping</option>
  <option value="100">4 Plaza</option>
  <option value="100">5 Shopping</option>
  <option value="100">6 Plaza</option>
</select><br><br>

<input id="add-buffet" type="checkbox" value="1000" />
<label for="add-buffet">Buffet</label><br>
<input id="add-decoracao" type="checkbox" value="499" />
<label for="add-decoracao">Decoração</label><br>
<input id="add-foto" type="checkbox" value="800" />
<label for="add-foto">Foto</label><br><br>

<label id="lista">Lista</label><br><br>
<span id="spanSelect"></span><br><br>
item 1 R$200,00<br>
item 2 R$1.000,00<br>
item 3 R$499,00<br>
item 4 R$800,00<br>

10
  • Era isso mesmo que eu estava tentando fazer, porém não estava retornando nada, muito obrigado! Commented 27/04/2018 às 18:47
  • Por nada man. Legal que tenha ajudado!
    – LeAndrade
    Commented 27/04/2018 às 18:49
  • Leandro, uma dúvida, como que eu faço para incluir na lista o nome do item, por exemplo, name="Almofada" então na lista ficaria Almofada - R$800 Commented 27/04/2018 às 19:36
  • Deste jeito que o código esta não da para ligar cada label com os inputs selecionados. O que dá para vc fazer e resolve é colocar a descrição tipo almofada dentro do value do input no Html.
    – LeAndrade
    Commented 27/04/2018 às 20:25
  • então mas quando eu coloco string dentro do value, quando eu somo todos os valores da erro Commented 27/04/2018 às 20:30
2

Você pode usar o seguinte seletor para pegar todos os checkboxes que estiverem selecionados:

$('input[type="checkbox"]:checked')

Abaixo, um exemplo com o seu código. Ao clicar no checkbox, ele seleciona/deseleciona e lista todos os que estão selecionados.

// click nos checkbox
$('input[type="checkbox"]').click(function() {
  console.log("\n");
  // seleciona todos checkboxes checados
  $('input[type="checkbox"]:checked').each(function() {
    // escreve no console
    console.log($(this).val() + ' ');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="list-lugar">
  <option value="0" disabled="true" selected="true">-</option>
  <option value="200">1 Shopping</option>
  <option value="200">2 Shopping</option>
  <option value="100">3 Shopping</option>
  <option value="100">4 Plaza</option>
  <option value="100">5 Shopping</option>
  <option value="100">6 Plaza</option>
</select><br><br>

<input id="add-buffet" type="checkbox" value="1000" />
<label>Buffet</label><br>
<input id="add-decoracao" type="checkbox" value="499" />
<label>Decoração</label><br>
<input id="add-foto" type="checkbox" value="800" />
<label>Foto</label><br><br>

<label>Lista</label><br><br>
item 1 R$200,00<br>
item 2 R$1.000,00<br>
item 3 R$499,00<br>
item 4 R$800,00<br>

A partir daqui você pode fazer o que quiser com os valores selecionados, só mudar o código dentro do each

2
  • Entendi!! Desculpa a pergunta, não conheço nada de javascript, e para pegar o valor das option e checkbox e apresentar em uma div por exemplo? É facil fazer isso? Commented 27/04/2018 às 17:50
  • Pode perguntar, participamos aqui pra nos ajudar... antes do each, cria uma variável, resultadopor exemplo... depois cria o div com id='resultado' por exemplo.. no código que coloquei, no lugar do console.log você pode acumular os valores numa variável, assim: resultado += "Valor: " + $(this).val() + "<br /">; Depois do each só jogar a variável no div: $('#resultado').html(resultado); e vai aparecer os valores selecionados na div Commented 27/04/2018 às 20:15
0

Segue uma alternativa com o VanillaJS (JavaScript Puro)

/* Captura todos os elementos do tipo checkbox */
const cb = document.querySelectorAll("input[type=\"checkbox\"]")

/* Adiciona o evento "analyzeCheckBox" no elemento */
cb.forEach( checkbox => {
  checkbox.addEventListener("change", analyzeCheckBox)
})

/* Função para verificar quais checkbox estão marcados */
function analyzeCheckBox() {

  /* Limpa o console */
  console.clear()
  
  cb.forEach( checkbox => {
  
    let text = ` ${checkbox.nextElementSibling.textContent}, cujo valor é ${checkbox.getAttribute("value")}, está `
  
    /* Verifica se o elemento está marcado */
    if (checkbox.checked) {
      console.log(text, "marcado")
    } else {
      console.log(text, "desmarcado")
    }
  })
}
<input id="add-buffet" type="checkbox" value="1000" />
<label>Buffet</label><br>
<input id="add-decoracao" type="checkbox" value="499" />
<label>Decoração</label><br>
<input id="add-foto" type="checkbox" value="800" />
<label>Foto</label><br><br>

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 .