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>

score 515 · Accepted Answer · edited Apr 16 '14 at 12:41

515

Combination of two previous answers:

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

edited Apr 16 '14 at 12:41

Martin Kapfhammer

260
1
4
18

answered Jan 28 '10 at 15:35

Alex LE

20,042
4
30
28

11

and another combo: var selected = $('#checkboxes input:checked').map(function(i,el){return el.name;}).get(); // add .join(';') to get a combined string – roberkules Dec 02 '11 at 00:08
2

@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. – ajm May 09 '12 at 04:05
2

@Ashish. Just write: var count = $('#checkboxes input:checked').length; – Alex LE May 14 '12 at 15:57
3

Unnecessary call of constructor `var selected = new Array();`. Better (cheaper) with `var selected = [];` – Pono Mar 17 '14 at 22:45
How do I get it on `change` function? – Si8 Feb 13 '17 at 16:10
To complement this answer, you can also use [attributeStartsWith selector](http://api.jquery.com/attribute-starts-with-selector) to do something more fancy like `$('[id^="chkbx"]:checked')` to select all selected ones based on their IDs. – Alejandro Cortes May 08 '19 at 20:49
My comment might sound silly but I spent hours figuring out the hard way that `$('[checked]')` is not the same as `$(':checked')`; the former only gives you those elements, whose HTML has been written as `checked`, even though now they are unchecked! at the moment you look whereas the latter gives you all elements that are actually checked at the moment you look. (my setup = FF 79.0 64bit) – mxl Sep 01 '20 at 19:19

nikc.org · Answer 2 · 2014-11-08T19:00:54.053

74

Would this do?

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

edited Nov 08 '14 at 19:00

answered Jan 28 '10 at 15:31

nikc.org

16,462
6
50
83

9

$(this).checked does not work. Use if ($(this).attr('checked')) or if ($(this).is(':checked')) – Stefan Steiger Jan 31 '13 at 09:40
3

if `.attr('checked')` or `.prop('checked')` or `.is(':checked')` does not work, try `.get(0).checked` – emfi Nov 23 '19 at 21:46

Corey · Answer 3 · 2010-01-28T15:46:34.687

42

$("#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 '10 at 15:46

answered Jan 28 '10 at 15:34

Corey

1,532
9
12

2

I think that should be return this.name or return $(this).attr('name'); – Jansen Price Jan 28 '10 at 15:42
5

`$("#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. – Alex Barrett Jan 28 '10 at 15:44
1

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 May 25 '16 at 23:24
1

Hey, I came looking again, and found it! (I know, not a very useful comment, but I couldn't resist.) – goodeye Aug 17 '21 at 02:22

Usman Shaukat · Answer 4 · 2014-04-25T19:18:19.643

32

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 '14 at 19:18

answered Apr 25 '14 at 19:01

Usman Shaukat

1,315
16
22

score 14 · Answer 5 · edited Feb 07 '17 at 15:49

14

This works for me.

var selecteditems = [];

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

edited Feb 07 '17 at 15:49

Mikepote

6,042
3
34
38

answered Apr 01 '13 at 20:32

Ricardo

141
1
2

It's really nice that you're not using `this` in the `each` function. – Bobort Sep 03 '20 at 18:32

score 7 · Answer 6 · edited May 23 '17 at 12:03

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()

score 5 · Answer 7 · answered Dec 22 '20 at 12:48

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;

score 3 · Answer 8 · edited May 05 '20 at 07:46

3

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

edited May 05 '20 at 07:46

kedar sedai

1,687
3
16
25

answered May 04 '20 at 22:59

David Blanco

31
3

What is the advantage of this solution? – Luis Gouveia May 05 '20 at 10:11

jamaljaj · Answer 9 · 2019-12-31T06:29:10.453

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>

Get a list of checked checkboxes in a div using jQuery

9 Answers9

Linked

Related