Using jquery to get all checked checkboxes with a certain class name
JqueryJquery SelectorsCheckboxJquery Problem Overview
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?
Jquery Solutions
Solution 1 - Jquery
$('.theClass:checkbox:checked')
will give you all the checked checkboxes with the class theClass
.
Solution 2 - Jquery
$('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
.
Solution 3 - Jquery
Obligatory .map
example:
var checkedVals = $('.theClass:checkbox:checked').map(function() {
return this.value;
}).get();
alert(checkedVals.join(","));
Solution 4 - Jquery
$('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());
});
Solution 5 - Jquery
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;
})()
Solution 6 - Jquery
$('input.theclass[type=checkbox]').each(function () {
var sThisVal = (this.checked ? $(this).val() : "");
});
Solution 7 - Jquery
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() : "");
});
Solution 8 - Jquery
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);
Solution 9 - Jquery
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.
Solution 10 - Jquery
$('input.myclass[type=checkbox]').each(function () {
var sThisVal = (this.checked ? $(this).val() : ""); });
See http://api.jquery.com/class-selector/">jQuery class selectors.
Solution 11 - Jquery
You can try like this
let values = (function() {
let a = [];
$(".chkboxes:checked").each(function() {
a.push($(this).val());
});
return a;
})();
Solution 12 - Jquery
<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>
Solution 13 - Jquery
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
Solution 14 - Jquery
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);
});
Solution 15 - 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"));
});
Solution 16 - Jquery
$(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');
}
});
});
Solution 17 - Jquery
$("input[name='<your_name_of_selected_group_checkboxes>']:checked").val()