List value of checkbox items

4

How do I list checkbox values when the user select and when not selected does not appear in the list? / p>

<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>
    
asked by anonymous 27.04.2018 / 19:34

3 answers

2

I made an example here looking like what you want, showing and hiding the choices made by the user:

$(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><selectclass="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>
    
27.04.2018 / 20:40
2

You can use the following selector to get all checked checkboxes:

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

Below is an example with your code. By clicking on the checkbox, it selects / deselects and lists all those that are selected.

// 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><selectclass="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>

From here you can do whatever you want with the selected values, just change the code inside each

    
27.04.2018 / 19:39
0

Here's an alternative with VanillaJS ( Pure )

/* 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>
    
27.04.2018 / 19:55