Using jQuery to get multiple checkbox's value and output as comma separated String.

Question

I have many checkboxs as below,

 Coo         


        

Answer 1

Try something like this:

var areaofinterest= "";

$("input[type=\"checkbox\"]").each(function() {
    if ($(this).attr("checked")) {
        if (areaofinterest !== "") areaofinterest += ",";

        areaofinterest += $(this).value();
    }
});

Answer 2

var values = "";
$("checkbox[name=areaofinterest]").each(function() { 
    values += $(this).val() + ",";
});

values = values.substring(0, values.length - 2);

Answer 3

 var mode = [];
            jQuery("input[name='mode[]']:checked").each(function(i) {
                mode.push($(this).val());
            });

Answer 4

Using jQuery to get multiple checkbox's value and output as comma separated String.

var programming = $("input[name='programming']:checked").map(function() {
    return this.value;
}).get().join(', ');

alert("My favourite programming languages are: " + programming);

    OR

var favProgramming = [];
$.each($("input[name='programming']:checked"), function(){            
    favProgramming .push($(this).val());
});

alert("My favourite programming languages are: " + favProgramming);

FOR DEMO HERE

Answer 5

var areaofinterest = '';

$('[name="areaofinterest"]')​.each(function(i,e) {
    var comma = areaofinterest.length===0?'':',';
    areaofinterest += (comma+e.value);
})​;

To get only checked boxes value :

var areaofinterest = '';

$('[name="areaofinterest"]')​.each(function(i,e) {
    if ($(e).is(':checked')) {
        var comma = areaofinterest.length===0?'':',';
        areaofinterest += (comma+e.value);
    }
})​;

FIDDLE

You could also do:

var areaofinterest = [];
$('[name="areaofinterest"]:checked').each(function(i,e) {
    areaofinterest.push(e.value);
});

areaofinterest = areaofinterest.join(',');

And there's probably a bunch of other ways to do this ?

Answer 6

Use the .map() function:

$('.Checkbox:checked').map(function() {return this.value;}).get().join(',')

Breaking that down:

$('.Checkbox:checked') selects the checked checkboxes.

.map(function() {return this.value;}) creates a jQuery object that holds an array containing the values of the checked checkboxes.

.get() returns the actual array.

.join(','); joins all of the elements of the array into a string, separated by a comma.

Working DEMO