Question

EDIT///////

In addition to the helpful advice below, it turns out that another bug was my inclusion of “[ ]” brackets inside my checkbox name attribute.

    <input type="checkbox" name="neighborhood_id[]"/>

That was screwing up my jquery selector, apparently.

//////END EDIT

I’ve gone through several related threads to find an answer to this and have come up empty. I’m positive it’s out there, but it’s so simple, it should a minute for someone to answer it.

I want to grab the values from multiple selected checkboxes (all with the same name attribute) and display them in a text input. Not sure if this is throwing a monkey wrench into it, but the checkboxes are initially hidden in a modal window. My attempt is working. I’ve also added .get() and toArray() to the map function, without success.

 $('[name=neighborhood_id[]]').change(function(){
    $('#area').val(function(){
        return $('[name=neighborhood_id[]]:checked').map(
            function(){return $(this).val()});
            });
    });

The problem that I’m having is that the text input is defaulting to the following:
[object Object] and it’s not updating when I do check the checboxes.

I’m assuming this might be related to returning the values from the each/map function as an array Object

thanks

Answer 1

You are definitely on the right track, just needed a few changes:

$('input[name=neighborhood_id]').change(function() {
  $('#area').val(
      $('[name=neighborhood_id]:checked').map(function() {
          return $(this).val();
      }).get().join(',')
 );

});

I think your main problem was that you were sending an anonymous function to $('#area').val

Working version: http://jsfiddle.net/uZcaT/