272

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?

3
  • Shall I update the title to say class instead of name? Commented Mar 27, 2011 at 15:24
  • @Russ Cam - already done Commented Mar 27, 2011 at 15:25
  • 1
    $('input[type=checkbox]:checked') will work too. Commented Dec 24, 2019 at 6:39

19 Answers 19

487

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

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

4 Comments

Nice. Also, $('.theClass:checkbox:not(:checked)') will get all the unchecked ones.
Can I do this for all checkbox with name?
How can I add another class on checked elements? I want to show border on checked input elements.
@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')
140
$('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.

3 Comments

Jquery notes on :checkbox recommends to stick with [type="checkbox"]. $('[type="checkbox"].class')....or $('input[type="checkbox"].class')
@TSmith do you have a reference?
I read that from here : api.jquery.com/checkbox-selector ...under "Additional Notes"
98

Obligatory .map example:

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

3 Comments

$('input.theClass:checked').map(function() {return this.value}).get().join(',');
@Fedir: your command gives on,on as a result ('on' for every checkbox checked)
@Jay You need to set the value attributes of your check boxes to get their value in a coma separated string
30
$('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());
});

2 Comments

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.
thank you :) i needed to find all checked checkboxes and your answer does that.
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;
})()

Comments

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

Comments

10

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

Comments

9

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.

1 Comment

This is the best answer.
8

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() : "");
});

Comments

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

See jQuery class selectors.

Comments

7

You can try like this

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

Comments

4
<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

Comments

4

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"));
});

Comments

3

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

Comments

2
$(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');
        }
    });
});

1 Comment

please consider adding a comment to explain your answer so that it would be easier to understand for the uninitiated
2

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);        
});

                                       

Comments

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

2 Comments

please explain what this code all about. It will help others to understand
This only gets the first value of the set.
0
$("input:checked.yourClassName").each(function(){
   console.log($(this).val());
});

It's work too.

Comments

0

If only your checkboxes have a given class name, you don't need to specify the :checkbox filter.

const newArray = $('.yourClass:checked').map(function(){return $(this).val()}).get();
console.log(newArray);

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.