How to get value from selected checkbox

Asked

Viewed 1,438 times

1

I am developing a site that has a search filter for neighborhoods, where the person selects in checkbox the neighborhoods. Then I need to take the values that are checked and play in a text (ex: Selected neighborhoods: Brooklin, Campo Belo)

Checkboxes look like this (it’s a list of 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, in case it is not possible I can only take 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!

javascript checkbox

3 answers

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

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>

  • Almost that, the only modification, as I do for him right at the beginning already bring only who is selected? for example high of the Apa be already checked and it bring the High value of the Apa

  • 1

    PERFECT!!! Thank you

0

See this way, generating a link to search 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>
  
  <div class="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 way will list all selected items and put as a parameter in the URL.

Browser other questions tagged javascript checkbox

You are not signed in. Login or sign up in order to post.