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

I know I can g开发者_Go百科et 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?

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

$('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.

Obligatory .map example:

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

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

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

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

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

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.

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

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

See jQuery class selectors.

You can try like this

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

<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

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

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

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

                                       

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

$("input:checked.yourClassName").each(function(){
   console.log($(this).val());
});

It's work too.

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

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