display multiple checkbox values (from modal window) in text input, via jQuery

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

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/

Try this:

var sOutput;
$('input[name=neighborhood_id]').each(function() {
    sOutput+=$(this).children('option:selected').val()+'\r\n';
});
$('#area').val(sOutput);

If it doesn't work, can you post your HTML code in JSfiddle.net?