jQuery checkbox values to comma separated list

8down votefavorite 2

I have several checkboxes with a name array and I want the output of the checked boxes to be a variable with a comma separated list. <input type="checkbox" name="example[]" value="288" /> <input type="checkbox" name="example[]" value="289" /> <input type="checkbox" name="example[]" value="290" /> For example if the first and last box are selected the output will be: var output = "288,290"; How can I do this with jQuery? jquery arrays list checkbox comma shareimprove this question edited Sep 19 '14 at 23:59 Benjamin 14.1k23109207 asked Mar 6 '12 at 22:54 24creative 1562310

possible duplicate of jQuery Array of all selected checkboxes (by class) – Felix Kling Mar 6 '12 at 22:56 add a comment

3 Answers

activeoldestvotes

up vote19down vote

You can use :checkbox and name attribute selector (:checkbox[name=example\\[\\]]) to get the list of checkbox with name="example[]" and then you can use :checked filter to get only the selected checkbox. Then you can use .map function to create an array out of the selected checkbox. DEMO var output = $.map($(':checkbox[name=example\\[\\]]:checked'), function(n, i){ return n.value; }).join(','); shareimprove this answer edited Nov 25 '14 at 20:47 answered Mar 6 '12 at 22:59 Selvakumar Arumugam 65.5k1099115

Hmmm, this seems to return a list of all (checked) checkboxes even with those without the name of example[]. e.g. jsfiddle.net/6LCvN . Any idea why? – Hugh Apr 10 '13 at 3:40  @Hugh Missed it somehow, but you need double slashes to escape the [ and ] jsfiddle.net/6LCvN/22 or wrap in quotes jsfiddle.net/hmtdtwbr – Selvakumar Arumugam Nov 25 '14 at 20:47  add a comment

up vote5down vote

Currently un-tested, but I believe the following should work: var valuesArray = $('input:checkbox:checked').map( function () { return $(this).val(); }).get().join(); Edited, after a small break, to use native DOM, rather than $(this).val() (which is needlessly expensive, in context): var valuesArray = $('input:checkbox:checked').map( function() { return this.value; }).get().join(","); shareimprove this answer edited Feb 11 '14 at 10:15 Kishor Subedi 4,20242447 answered Mar 6 '12 at 22:57 David Thomas 187k31266320

add a comment

up vote3down vote

var valuesArray = $('input[name="valuehere"]:checked').map(function () { return this.value; }).get().join(","); works for me always shareimprove this answer