WEB/jQuery

jQuery checkbox values to comma separated list

remoted 2018. 1. 22. 03:24
728x90


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?

    
shareimprove this question
   
possible duplicate of jQuery Array of all selected checkboxes (by class) – Felix Kling Mar 6 '12 at 22:56
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
   
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 
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
up vote3down vote
var valuesArray = $('input[name="valuehere"]:checked').map(function () {  
        return this.value;
        }).get().join(",");

works for me always

shareimprove this answer