Get a list of checked checkboxes in a div using jQuery

JqueryCheckboxJquery Selectors

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

  

 
   

  

      

 



   
  

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJuozas KontvainisView Question on Stackoverflow
Solution 1 - JqueryAlex LEView Answer on Stackoverflow
Solution 2 - Jquerynikc.orgView Answer on Stackoverflow
Solution 3 - JqueryCoreyView Answer on Stackoverflow
Solution 4 - JqueryUsman ShaukatView Answer on Stackoverflow
Solution 5 - JqueryRicardoView Answer on Stackoverflow
Solution 6 - JquerySharpCView Answer on Stackoverflow
Solution 7 - JqueryNestoView Answer on Stackoverflow
Solution 8 - JqueryDavid BlancoView Answer on Stackoverflow
Solution 9 - JqueryjamaljajView Answer on Stackoverflow