Get a list of checked checkboxes in a div using jQuery
JqueryCheckboxJquery SelectorsJquery Problem Overview
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>
Jquery Solutions
Solution 1 - Jquery
Combination of two previous answers:
var selected = [];
$('#checkboxes input:checked').each(function() {
selected.push($(this).attr('name'));
});
Solution 2 - Jquery
Would this do?
var selected = [];
$('div#checkboxes input[type=checkbox]').each(function() {
if ($(this).is(":checked")) {
selected.push($(this).attr('name'));
}
});
Solution 3 - Jquery
$("#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;
});
Solution 4 - Jquery
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
Solution 5 - Jquery
This works for me.
var selecteditems = [];
$("#Div").find("input:checked").each(function (i, ob) {
selecteditems.push($(ob).val());
});
Solution 6 - Jquery
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()
Solution 7 - Jquery
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;
Solution 8 - Jquery
var agencias = [];
$('#Div input:checked').each(function(index, item){
agencias.push(item.nextElementSibling.attributes.for.nodeValue);
});
Solution 9 - Jquery
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>