CODEWITHSUNDEEP
jquerycheckbox
Shivanand L.C
Shivanand L.C

Reputation: 105

How to get the total count of checkboxes of based on particular class

I have get stuck in getting the total number of checkboxes of checked checkboxes when I click select all as code shown below

$("#SelctCheckAll").click(function () {
        $('input:checkbox').not(this).prop('checked', this.checked);
        var numberOfChecked = $('input:checkbox:checked').length;
        var totalCheckboxes = $('input:checkbox').length;
    });

So it's working fine. But my doubt is when I add two classes such as class="checkbox1" and class="checkbox2" both having type=checkbox.

For example, class=checkbox1 contains 6 checkboxes and class=checkbox2 contains 10 checkboxes. So how to get total number of checkboxes of class=checkbox1 and vice versa? Sample below

<input type="checkbox" id="SelctCheckAll" name="SelctCheckAll">
<input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox2">

Upvotes: 1

Views: 2905

Answers (5)

Bhavyesh
Bhavyesh

Reputation: 11

<input type="checkbox" id="SelctCheckAll" name="SelctCheckAll" class="testcheckbox">
<input type="checkbox" class="testcheckbox">
<input type="checkbox" class="testcheckbox">

var count = $('input[type="checkbox"].testcheckbox').length;
alert(count);

Upvotes: 1

hallleron
hallleron

Reputation: 1992

There you go with a short fiddle:

I used the jQuery filter() method to get all the information I need - such as total count of checkboxes with a certain class and also only the checked checkboxes of a certain class.

Have a look at the working fiddle here:

var elems = $('input[type="checkbox"]');

elems.on('click', function(e){
	if(e.target.id === "SelectCheckAll") elems.prop('checked', (elems.prop('checked')) ? true : false );
	getStatistics();
});

function getStatistics(){
	console.log('Total count of ".checkbox1":' + elems.filter( ".checkbox1" ).length);
    console.log('Total count of ".checkbox2":' + elems.filter( ".checkbox2" ).length);
    console.log('Count of checked ".checkbox1":' + elems.filter( ".checkbox1:checked" ).length);
    console.log('Count of checked ".checkbox2":' + elems.filter( ".checkbox2:checked" ).length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="SelectCheckAll" name="SelctCheckAll">

<input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox1">

<input type="checkbox" class="checkbox2">
<input type="checkbox" class="checkbox2">
<input type="checkbox" class="checkbox2">
<input type="checkbox" class="checkbox2">

Upvotes: 1

Prabhath Withanage
Prabhath Withanage

Reputation: 242

var checkbox1 = $('input.checkbox1:checkbox:checked').length; //for class checkbox1
var checkbox2 = $('input.checkbox2:checkbox:checked').length; //for class checkbox2

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

You can get the total number of checked checkbox like:

$(input[type="checkbox"]).is(':checked').length;

or by using the class like:

$('.class1').is(':checked').length;

Upvotes: 2

Milan Chheda
Milan Chheda

Reputation: 8249

Use just need to add class name to this statement that you are already using, to get the checked checkboxes:

$('input.checkbox1:checkbox:checked').length


$("#SelctCheckAll").click(function() {
  $('input:checkbox').not(this).prop('checked', this.checked);
  var numberOfChecked = $('input:checkbox:checked').length;
  var totalCheckboxes = $('input:checkbox').length;

  var checkbox1 = $('input.checkbox1:checkbox:checked').length;
  console.log('Total checkbox1: ' + checkbox1);

  var checkbox2 = $('input.checkbox2:checkbox:checked').length;
  console.log('Total checkbox2: ' + checkbox2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="SelctCheckAll" name="SelctCheckAll">
<input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox1">

<input type="checkbox" class="checkbox2">
<input type="checkbox" class="checkbox2">
<input type="checkbox" class="checkbox2">
<input type="checkbox" class="checkbox2">
<input type="checkbox" class="checkbox2">
<input type="checkbox" class="checkbox2">
<input type="checkbox" class="checkbox2">

Upvotes: 4

Related Questions