Get a list of checked checkboxes in a div using jQuery

Question

I want to get a list of names of checkboxes that are selected in a div with certain id. How would I do that using jQuery?

E.g., for this div I want to get array ["c_n_0"; "c_n_3"] or a string "c_n_0;c_n_3"

<div id="checkboxes">
    <input id="chkbx_0" type="checkbox" name="c_n_0" checked="checked" />Option 1
    <input id="chkbx_1" type="checkbox" name="c_n_1" />Option 2
    <input id="chkbx_2" type="checkbox" name="c_n_2" />Option 3
    <input id="chkbx_3" type="checkbox" name="c_n_3" checked="checked" />Option 4
</div>

Martin Kapfhammer · Accepted Answer · 2014-04-16 12:41:27Z

524

Combination of two previous answers:

var selected = [];
$('#checkboxes input:checked').each(function() {
    selected.push($(this).attr('name'));
});

edited Apr 16, 2014 at 12:41

Martin Kapfhammer

2601 gold badge4 silver badges18 bronze badges

answered Jan 28, 2010 at 15:35

Alex LE

20.8k4 gold badges32 silver badges30 bronze badges

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

7 Comments

roberkules Over a year ago

and another combo: var selected = $('#checkboxes input:checked').map(function(i,el){return el.name;}).get(); // add .join(';') to get a combined string

ajm Over a year ago

@Alex LE. How Do i get only the count of the selected checkboxes? I just need to check if any of the checkboxes inside the div is checked or not.

Alex LE Over a year ago

@Ashish. Just write: var count = $('#checkboxes input:checked').length;

Pono Over a year ago

Unnecessary call of constructor var selected = new Array();. Better (cheaper) with var selected = [];

Si8 Over a year ago

How do I get it on change function?

|

nikc.org · Accepted Answer · 2014-11-08 19:00:54Z

77

Would this do?

var selected = [];
$('div#checkboxes input[type=checkbox]').each(function() {
   if ($(this).is(":checked")) {
       selected.push($(this).attr('name'));
   }
});

edited Nov 8, 2014 at 19:00

answered Jan 28, 2010 at 15:31

nikc.org

17.1k7 gold badges53 silver badges83 bronze badges

2 Comments

Stefan Steiger Over a year ago

$(this).checked does not work. Use if ($(this).attr('checked')) or if ($(this).is(':checked'))

emfi Over a year ago

if .attr('checked') or .prop('checked') or .is(':checked') does not work, try .get(0).checked

Corey · Accepted Answer · 2010-01-28 15:46:34Z

43

$("#checkboxes").children("input:checked")

will give you an array of the elements themselves. If you just specifically need the names:

$("#checkboxes").children("input:checked").map(function() {
    return this.name;
});

edited Jan 28, 2010 at 15:46

answered Jan 28, 2010 at 15:34

Corey

1,5429 silver badges12 bronze badges

4 Comments

Jansen Price Over a year ago

I think that should be return this.name or return $(this).attr('name');

Alex Barrett Over a year ago

$("#checkboxes :checked").map(...) would be more concise. As Jansen points out, it should be $(this).attr("name"); but I would consider a simple this.name which should be just as compatible.

goodeye Over a year ago

This was great for the simple map. I changed children to find to look deeper, and needed jquery attributes so used $(this) (and wrote this comment for when I come looking again...)

goodeye Over a year ago

Hey, I came looking again, and found it! (I know, not a very useful comment, but I couldn't resist.)

Usman Shaukat · Accepted Answer · 2014-04-25 19:18:19Z

33

I needed the count of all checkboxes which are checked. Instead of writing a loop i did this

$(".myCheckBoxClass:checked").length;

Compare it with the total number of checkboxes to see if they are equal. Hope it will help someone

edited Apr 25, 2014 at 19:18

answered Apr 25, 2014 at 19:01

Usman Shaukat

1,32916 silver badges23 bronze badges

Comments

Mikepote · Accepted Answer · 2017-02-07 15:49:24Z

16

This works for me.

var selecteditems = [];

$("#Div").find("input:checked").each(function (i, ob) { 
    selecteditems.push($(ob).val());
});

edited Feb 7, 2017 at 15:49

Mikepote

6,6133 gold badges37 silver badges39 bronze badges

answered Apr 1, 2013 at 20:32

Ricardo

1611 silver badge2 bronze badges

1 Comment

Bobort Over a year ago

It's really nice that you're not using this in the each function.

Community · Accepted Answer · 2017-05-23 12:03:06Z

7

You could also give them all the same name so they are an array, but give them different values:

<div id="checkboxes">
    <input type="checkbox" name="c_n[]" value="c_n_0" checked="checked" />Option 1
    <input type="checkbox" name="c_n[]" value="c_n_1" />Option 2
    <input type="checkbox" name="c_n[]" value="c_n_2" />Option 3
    <input type="checkbox" name="c_n[]" value="c_n_3" checked="checked" />Option 4
</div>

You can then get only the value of only the ticked ones using map:

$('#checkboxes input:checked[name="c_n[]"]')
            .map(function () { return $(this).val(); }).get()

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Jan 24, 2016 at 18:17

SharpC

7,5744 gold badges53 silver badges45 bronze badges

Comments

Nesto · Accepted Answer · 2020-12-22 12:48:22Z

5

If you need to get quantity of selected checkboxes:

var selected = []; // initialize array
    $('div#checkboxes input[type=checkbox]').each(function() {
       if ($(this).is(":checked")) {
           selected.push($(this));
       }
    });
var selectedQuantity = selected.length;

answered Dec 22, 2020 at 12:48

Nesto

1972 silver badges6 bronze badges

Comments

kedar sedai · Accepted Answer · 2020-05-05 07:46:26Z

4

 var agencias = [];
 $('#Div input:checked').each(function(index, item){
 agencias.push(item.nextElementSibling.attributes.for.nodeValue);
 });

edited May 5, 2020 at 7:46

kedar sedai

1,7203 gold badges20 silver badges29 bronze badges

answered May 4, 2020 at 22:59

David Blanco

413 bronze badges

1 Comment

Luis Gouveia Over a year ago

What is the advantage of this solution?

jamaljaj · Accepted Answer · 2019-12-31 06:29:10Z

0

function listselect() {
                var selected = [];
                $('.SelectPhone').prop('checked', function () {

                    selected.push($(this).val());
                });

                alert(selected.length);

     <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="1" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="2" />
         <input type="checkbox" name="SelectPhone" class="SelectPhone"  value="3" />
        <button onclick="listselect()">show count</button>

edited Dec 31, 2019 at 6:29

answered Dec 31, 2019 at 6:14

jamaljaj

12 bronze badges

Collectives™ on Stack Overflow

Get a list of checked checkboxes in a div using jQuery

9 Answers 9

7 Comments

2 Comments

4 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

7 Comments

2 Comments

4 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related