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

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

Ryley · Accepted Answer · 2011-03-15 22:54:07Z

0

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/

answered Mar 15, 2011 at 22:54

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ben Over a year ago

you are awesome ryley. thank you so much. I guess that I'm a bit confused by my inability to send an anon function there. val can take a function as an argument, in addition to a string

Ryley Over a year ago

I believe you could have done it with the anon function as well, if you returned map(...).get().join(',') inside it, instead of just map(...)

user657496 · Accepted Answer · 2011-03-15 21:01:46Z

0

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?

answered Mar 15, 2011 at 21:01

user657496

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related