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

Question

I have many checkboxs as below,

<li><input type="checkbox" name="areaofinterest" value="home_coo" id="home_coo" class="Checkbox" > Cooking</li>
    <li><input type="checkbox" name="areaofinterest" value="home_cra" id="home_cra" class="Checkbox"> Crafts</li>
    <li><input type="checkbox" name="areaofinterest" value="home_dec" id="home_dec" class="Checkbox"> Decorating</li>
    <li><input type="checkbox" name="areaofinterest" value="home_ent" id="home_ent" class="Checkbox"> Entertaining</li>
    <li><input type="checkbox" name="areaofinterest" value="home_gar" id="home_gar" class="Checkbox"> Gardening</li>
    <li><input type="checkbox" name="areaofinterest" value="home_hom" id="home_hom" class="Checkbox"> Home Improvement</li>
    <li><input type="checkbox" name="areaofinterest" value="home_mar" id="home_mar" class="Checkbox"> Marriage</li>
    <li><input type="checkbox" name="areaofinterest" value="home_par" id="home_par" class="Checkbox"> Parenting</li>
    <li><input type="checkbox" name="areaofinterest" value="home_pet" id="home_pet" class="Checkbox" > Pets</li>
    <li><input type="checkbox" name="areaofinterest" value="home_ret" id="home_ret" class="Checkbox"> Retirement</li>

How can I use jQuery to get the checked values and output as areaofinterest="home_coo,home_mar,home_pet" ?

Thanks a lot.

Anthony Grist · Accepted Answer · 2012-07-30 14:21:38Z

114

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

answered Jul 30, 2012 at 14:21

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

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

3 Comments

Roi Over a year ago

Just an FYI - the "," within the join is not needed as it will add a comma by default when just using join(). Also good to note, this is the exact scenario that jQuery uses in the docs for .map(): api.jquery.com/map

Patrick Over a year ago

Updated Demo: Make the comma separated string, store the string, then use the string to restore the checkboxes.

Milan Bastola Over a year ago

can I display it in List??

adeneo · Accepted Answer · 2012-07-30 14:21:56Z

4

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 ?

edited Jul 30, 2012 at 14:21

answered Jul 30, 2012 at 14:16

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Łukasz W. · Accepted Answer · 2012-07-30 14:16:17Z

0

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

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

answered Jul 30, 2012 at 14:16

Łukasz W.

9,7935 gold badges40 silver badges65 bronze badges

Comments

Paul Aldred-Bann · Accepted Answer · 2012-07-30 14:17:24Z

0

Try something like this:

var areaofinterest= "";

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

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

answered Jul 30, 2012 at 14:17

Paul Aldred-Bann

6,0306 gold badges39 silver badges55 bronze badges

3 Comments

Łukasz W. Over a year ago

He wants to sum values not id's

Paul Aldred-Bann Over a year ago

His exact specification was: "How can I use jQuery to get the checked values and output as areaofinterest="home_coo,home_mar,home_pet"?"

Paul Aldred-Bann Over a year ago

In this context his IDs had the same value as his "values", but I see your point. Amended my sample.

Anurag · Accepted Answer · 2013-10-17 10:38:39Z

0

Or you use can do using array like shown below

 var checkBoxArray = new Array();
 var areaofinterest = '';

 $(':checkbox:checked').each(function(i){
        checkBoxArray .push($(this).attr("value"));

});

  if (checkBoxArray .length == 0) {
     } else {
     while (checkBoxArray .length != 0) {
            if (checkBoxArray .length == 1) {
                areaofinterest += checkBoxArray .pop();
            } else {
                areaofinterest += (checkBoxArray .pop() + ",");
                 }
            }
}
console.log(areaofinterest);

though you will get String in reverse order.

answered Oct 17, 2013 at 10:38

Anurag

2271 gold badge6 silver badges14 bronze badges

Comments

kush · Accepted Answer · 2019-04-30 10:43:32Z

0

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

answered Apr 30, 2019 at 10:43

kush

6656 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

3 Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related