Question

当我点击选择全部如下所示的代码时，我无法获得已选中复选框的复选框总数

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

所以它工作正常。但我怀疑的是，当我添加两个类时，例如class =＆＃34; checkbox1＆＃34;和class =＆＃34; checkbox2＆＃34;两者都有type =复选框。

例如，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

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

Answer 4

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

Answer 5

你带着一个小小提琴：

我使用了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">

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

5 个答案: