Using jquery to get all checked checkboxes with a certain class name

Question

I know I can get all checked checkboxes on a page using this:

$('input[type=checkbox]').each(function () {
    var sThisVal = (this.checked ? $(this).val() : "");
});

But I am now using this on a page that has some other checkboxes that I don't want to include. How would I change the above code to only look at checked checkboxes that have a certain class on them?

Shall I update the title to say `class` instead of `name`? – Russ Cam Mar 27 '11 at 15:24 — Russ Cam, Mar 27 '11 at 15:24
$('input[type=checkbox]`:checked`') will work too. – super cool Dec 24 '19 at 06:39 — super cool, Dec 24 '19 at 06:39

Cokegod · Accepted Answer · 2013-06-08T22:47:02.690

461

$('.theClass:checkbox:checked') will give you all the checked checkboxes with the class theClass.

edited Jun 08 '13 at 22:47

answered Mar 27 '11 at 15:20

Cokegod

8,018
9
28
46

17

Nice. Also, $('.theClass:checkbox:not(:checked)') will get all the unchecked ones. – Venugopal M Jun 11 '19 at 09:01
1

Can I do this for all checkbox with name? – FluffyBeing Jul 23 '19 at 18:11
How can I add another class on checked elements? I want to show border on checked input elements. – Najam Us Saqib Apr 29 '20 at 07:36
2

@FluffyBeing yes, to get to the input by its name you can use: `$('input[name="input_name"]:checked')` or `$('input[name="input_name"]').filter(':checked')` – boryn Mar 05 '21 at 06:39

Russ Cam · Answer 2 · 2011-03-27T15:20:34.357

130

$('input:checkbox.class').each(function () {
       var sThisVal = (this.checked ? $(this).val() : "");
  });

An example to demonstrate.

:checkbox is a selector for checkboxes (in fact, you could omit the input part of the selector, although I found niche cases where you would get strange results doing this in earlier versions of the library. I'm sure they are fixed in later versions). .class is the selector for element class attribute containing class.

edited Mar 27 '11 at 15:20

answered Mar 27 '11 at 15:15

Russ Cam

121,250
30
197
258

9

Jquery notes on :checkbox recommends to stick with [type="checkbox"]. $('[type="checkbox"].class')....or $('input[type="checkbox"].class') – TSmith Jun 27 '13 at 21:00
@TSmith do you have a reference? – Russ Cam Jun 27 '13 at 21:05
9

I read that from here : http://api.jquery.com/checkbox-selector/ ...under "Additional Notes" – TSmith Aug 02 '13 at 18:01

score 91 · Answer 3 · answered Mar 27 '11 at 15:27

91

Obligatory .map example:

var checkedVals = $('.theClass:checkbox:checked').map(function() {
    return this.value;
}).get();
alert(checkedVals.join(","));

answered Mar 27 '11 at 15:27

karim79

334,458
66
409
405

3

$('input.theClass:checked').map(function() {return this.value}).get().join(','); – Fedir RYKHTIK May 22 '13 at 13:34
@Fedir: your command gives ````on,on```` as a result ('on' for every checkbox checked) – Jay Sep 02 '13 at 14:12
@Jay You need to set the value attributes of your check boxes to get their value in a coma separated string – Kamran Ali May 13 '15 at 17:39

alienriver49 · Answer 4 · 2016-07-28T14:33:27.687

26

$('input.yourClass:checkbox:checked').each(function () {
    var sThisVal = $(this).val();
});

This would get all checkboxes of the class name "yourClass". I like this example since it uses the jQuery selector checked instead of doing a conditional check. Personally I would also use an array to store the value, then use them as needed, like:

var arr = [];
$('input.yourClass:checkbox:checked').each(function () {
    arr.push($(this).val());
});

edited Jul 28 '16 at 14:33

answered Nov 05 '13 at 18:16

alienriver49

632
11
18

If there was a need for storing the values in an array, `.map` could be a more pleasant alternative, as illustrated by karim79's answer. – duplode Nov 05 '13 at 18:40
1

thank you :) i needed to find all checked checkboxes and your answer does that. – ufk May 02 '14 at 09:25

Faraz Kelhini · Answer 5 · 2018-05-20T11:17:45.217

14

If you need to get the value of all checked checkboxes as an array:

let myArray = (function() {
    let a = [];
    $(".checkboxes:checked").each(function() {
        a.push(this.value);
    });
    return a;
})()

edited May 20 '18 at 11:17

answered Sep 05 '16 at 14:37

Faraz Kelhini

3,797
31
38

score 11 · Answer 6 · answered Mar 27 '11 at 15:15

11

 $('input.theclass[type=checkbox]').each(function () {
   var sThisVal = (this.checked ? $(this).val() : "");
 });

answered Mar 27 '11 at 15:15

Alp

28,390
26
114
195

score 8 · Answer 7 · answered Jan 10 '13 at 16:28

I'm not sure if it helps for your particular case, and I'm not sure if in your case, the checkboxes you want to include only are all part of a single form or div or table, but you can always select all checkboxes inside a specific element. For example:

<ul id="selective">
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
</ul>

Then, using the following jQuery, it ONLY goes through the checkboxes within that UL with id="selective":

$('#selective input:checkbox').each(function () {
 var sThisVal = (this.checked ? $(this).val() : "");
});

score 8 · Answer 8 · edited Jul 24 '18 at 15:53

8

Simple way to get all of values into an array

var valores = (function () {
    var valor = [];
    $('input.className[type=checkbox]').each(function () {
        if (this.checked)
            valor.push($(this).val());
    });
    return valor;

})();

console.log(valores);

edited Jul 24 '18 at 15:53

HoldOffHunger

15,349
8
79
115

answered Nov 17 '17 at 19:11

Caike Bispo

101
1
4

score 8 · Answer 9 · edited Jul 24 '18 at 15:48

8

You can use something like this:
HTML:

<div><input class="yourClass" type="checkbox" value="1" checked></div>
<div><input class="yourClass" type="checkbox" value="2"></div>
<div><input class="yourClass" type="checkbox" value="3" checked></div>
<div><input class="yourClass" type="checkbox" value="4"></div>

JQuery:

$(".yourClass:checkbox").filter(":checked")

It will choose values of 1 and 3.

edited Jul 24 '18 at 15:48

HoldOffHunger

15,349
8
79
115

answered May 16 '18 at 18:15

Philip Voloshin

91
1
3

1

This is the best answer. – Marcos Buarque Jun 08 '20 at 03:39

score 7 · Answer 10 · answered Mar 27 '11 at 15:15

7

 $('input.myclass[type=checkbox]').each(function () {
   var sThisVal = (this.checked ? $(this).val() : ""); });

See jQuery class selectors.

answered Mar 27 '11 at 15:15

Liza Daly

2,893
22
30

score 7 · Answer 11 · answered Feb 09 '19 at 10:31

7

You can try like this

let values = (function() {
                let a = [];
                $(".chkboxes:checked").each(function() {
                    a.push($(this).val());
                });
                return a;
            })();

answered Feb 09 '19 at 10:31

Bablu Ahmed

3,692
3
36
57

score 4 · Answer 12 · answered Jan 03 '18 at 06:39

<input type="checkbox" id="Checkbox1" class = "chk" value = "1" />
<input type="checkbox" id="Checkbox2" class = "chk" value = "2" />
<input type="checkbox" id="Checkbox3" class = "chk" value = "3" />
<input type="checkbox" id="Checkbox4" class = "chk" value = "4" />
<input type="button" id="demo" value = "Demo" />

<script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    $("#demo").live("click", function () {
        $("input:checkbox[class=chk]:checked").each(function () {
            alert("Id: " + $(this).attr("id") + " Value: " + $(this).val());
        });
    });
</script>

http://www.jqueryfaqs.com/Articles/Get-values-of-all-checked-checkboxes-by-class-name-using-jQuery.aspx

score 3 · Answer 13 · answered May 29 '14 at 14:25

I know this has a bunch of great answers on this question already but I found this while browsing around and I find it really easy to use. Thought I'd share for anyone else looking.

HTML:

<fieldset>
    <!-- these will be affected by check all -->
    <div><input type="checkbox" class="checkall"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
    <!-- these won't be affected by check all; different field set -->
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>

jQuery:

$(function () {
    $('.checkall').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
    });
});

Reference: Easiest "Check All" with jQuery

score 2 · Answer 14 · answered Jul 11 '20 at 18:52

HTML

 <p> <input type="checkbox" name="fruits" id="fruits"  value="1" /> Apple </p>
 <p> <input type="checkbox" name="fruits" id="fruits"  value="2" /> Banana </p>
 <p> <input type="checkbox" name="fruits" id="fruits"  value="3" /> Mango </p>
 <p> <input type="checkbox" name="fruits" id="fruits"  value="4" /> Grape </p>

Jquery

for storing the selected fruit values define array.

 fruitArray = [];

$.each will iterate the checked check boxes and pushed into array.

 $.each($("input[name='fruits']:checked"), function (K, V) {    
    fruitArray.push(V.value);        
});

score 2 · Answer 15 · answered Nov 26 '20 at 02:23

2

A simple way to get the ids of the checked check boxes by class name:

$(".yourClassName:checkbox:checked").each(function() {
     console.log($(this).attr("id"));
});

answered Nov 26 '20 at 02:23

Sharhabeel Hamdan

881
8
12

score 1 · Answer 16 · answered Jan 28 '20 at 04:26

1

$(document).ready(function(){
    $('input.checkD[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            $(this).val('true');
        }
        else if($(this).prop("checked") == false){
            $(this).val('false');
        }
    });
});

answered Jan 28 '20 at 04:26

kapil sarvesh

11
1

please consider adding a comment to explain your answer so that it would be easier to understand for the uninitiated – Simas Joneliunas Jan 28 '20 at 04:46

score 0 · Answer 17 · answered Mar 17 '20 at 05:38

0

$("input[name='<your_name_of_selected_group_checkboxes>']:checked").val()

answered Mar 17 '20 at 05:38

KEERTHI K N

11
1

1

please explain what this code all about. It will help others to understand – Shafin Mahmud Mar 17 '20 at 07:20

Using jquery to get all checked checkboxes with a certain class name

17 Answers17

Linked

Related