How to get value from checked checkboxes

Navigation
0

I'm developing a website that has a neighborhood search filter, where the person selects checkboxes in the neighborhoods. Then I need to get the values that are checked and play in a text (ex: Selected neighborhoods: Brooklin, Campo Belo)

The checkboxes are like this (it's a list with dozens of neighborhoods): 

<div class="span3">
<input type="checkbox" value="43" name="bairro[]" id="bairro0">&nbsp; Aclimação
</div>
<div class="span3">
<input type="checkbox" value="2" name="bairro[]" id="bairro1">&nbsp; Alto da Boa Vista
</div>
<div class="span3">
<input type="checkbox" value="48" name="bairro[]" id="bairro2">&nbsp; Alto da Lapa
</div>

If it is possible to get the name of the neighborhood already, in case I can not just get the value of the checkbox and make a query using mysql and php to bring the name.

When the person applies the filter and gives OK, the page already loads with the selected fields.

Thank you!

    
asked by anonymous 24.01.2017 / 15:14

3 answers

0

var els = document.querySelectorAll("input[type='checkbox'");
var selecionados = '';
for (var i = 0; i < els.length; i++) {
  if (els[i].checked) {
    selecionados += els[i].nextSibling.nodeValue + ',';
    document.getElementById("sel").innerHTML = selecionados.substring(0, selecionados.length - 1);;
  }

  els[i].addEventListener("click", function() {
    if (this.checked)
      selecionados += this.nextSibling.nodeValue + ',';
    document.getElementById("sel").innerHTML = selecionados.substring(0, selecionados.length - 1);
  });
}
<div class="span3">
  <input type="checkbox" value="43" name="bairro[]" id="bairro0">&nbsp; Aclimação</input>
</div>
<div class="span3">
  <input type="checkbox" value="2" name="bairro[]" id="bairro1">&nbsp; Alto da Boa Vista</input>
</div>
<div class="span3">
  <input type="checkbox" value="48" name="bairro[]" id="bairro2" checked>&nbsp; Alto da Lapa</input>
</div>
<br>Selecionados:
<label id="sel"></label>
    
24.01.2017 / 15:22
0

Change the name of your inputs to: 

name="bairro"

And try this: 

$(function () {
    $('.span3').click(function () {
        var checkValues = $('input[name=bairro]:checked').map(function() {
            return $(this).parent().text();
        }).get();
        //do something with your checkValues array
    });
});​
    
24.01.2017 / 15:22
0

See this way, generating a search link with $_GET 

$(document).ready(function(){             
  $("#test").click(function(){           
  var testval = [];
     $('.span3:checked').each(function() {
       testval.push($(this).val());
     });
    document.getElementById("bairro").text = "http://teste.com/?bairro="+testval;
 });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><divclass="span3">
<input class="span3" type="checkbox" value="43" name="bairro[]" id="bairro0">&nbsp; Aclimação
</div>
<div class="span3">
<input class="span3" type="checkbox" value="2" name="bairro[]" id="bairro1">&nbsp; Alto da Boa Vista
</div>
<div class="span3">
<input class="span3" type="checkbox" value="48" name="bairro[]" id="bairro2">&nbsp; Alto da Lapa
</div>
<a href="javascript:void(0)" id="test">Test</a></div>
</br>
<a href="#" id="bairro"> </a>

This will list all the selected items and put them as a parameter in the URL.

    
24.01.2017 / 15:27
date function in html5 integrated with php Can not detect object