如何获取基于特定类的复选框总数

Question

当我单击全选时，我一直无法获取选中复选框的复选框总数，如下所示

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

所以它工作正常。但我的疑问是当我添加两个类时，例如 class="checkbox1" 和 class="checkbox2" 都具有 type=checkbox。

例如，class=checkbox1 包含 6 个复选框，class=checkbox2 包含 10 个复选框。那么如何获得 class=checkbox1 的复选框总数，反之亦然？下面的示例

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

Answer 1

使用只需将类名添加到您已经在使用的该语句中，即可获得checked 复选框：

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

Answer 2

您可以获得选中复选框的总数，例如：

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

或使用class 喜欢：

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

Answer 3

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

Answer 4

你用一个短小提琴就可以了：

我使用了 jQuery filter() 方法来获取我需要的所有信息 - 例如具有某个类的复选框的总数以及仅某个类的选中复选框。

看看这里的工作小提琴：

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

Answer 5

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