Put checkbox values into hidden input with jQuery

Question

I'd like to populate a hidden input with the values of selected checkboxes with a space between these values. I've tried the following which in theory should work but it isnt…

JS:

$(document).ready(function () {


      var vals = $(':checkbox:checked').map(function(){
         return $(this).val();
      }).get().join(',');

      // save the values to a hidden field
      $('#tags').val(vals);


});

HTML

 <form>

  <input type="checkbox" value="test1" id="test1"><label>Test</label>
  <input type="checkbox" value="test2" id="test2"><label>Test2</label>
  <input type="checkbox" value="test3" id="test3"><label>Test3</label>

  <input type="text" value="" id="tags">

</form>

Any ideas?

Seems to work for me to : jsfiddle.net/96qfB are you trying to update the result when a checkbox is changed as well ? — adeneo
– adeneo, Commented Nov 8, 2012 at 16:00

Sushanth -- · Accepted Answer · 2012-11-08 16:05:20Z

7

:checkbox is deprecated

Instead of

$(':checkbox:checked')

Use

$('input[type="checkbox"]:checked')

Also none of the checkboxes are checked when the document is Ready .. Set them first and then try ...

HTML

  <input type="checkbox" value="test1" id="test1" checked><label>Test</label>
  <input type="checkbox" value="test2" id="test2" checked><label>Test2</label>
  <input type="checkbox" value="test3" id="test3"><label>Test3</label>
  <input type="text" value="" id="tags">

Javascript

function Populate(){
    vals = $('input[type="checkbox"]:checked').map(function() {
        return this.value;
    }).get().join(',');
    console.log(vals);
    $('#tags').val(vals);
}

$('input[type="checkbox"]').on('change', function() {
    Populate()
}).change();

Check Fiddle

edited Nov 8, 2012 at 16:05

answered Nov 8, 2012 at 15:58

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

2 Comments

Nick Over a year ago

Thanks so much, this works exactly as I wanted! stupid me for running it on document ready :@!

Sushanth -- Over a year ago

@Nick.. Glad to have helped :)

Michal Klouda · Accepted Answer · 2012-11-08 15:58:51Z

3

You just need to change your selector and attach your script to some event. For example:

$('input[type=checkbox]').change(function() {

    var vals = $('input[type=checkbox]:checked').map(function() {
        return $(this).val();
    }).get().join(',');

    $('#tags').val(vals);

});

See this DEMO.

answered Nov 8, 2012 at 15:58

Michal Klouda

14.6k7 gold badges58 silver badges79 bronze badges

Collectives™ on Stack Overflow

Put checkbox values into hidden input with 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