变量中的jQuery选择器 - 计数选中复选框

时间:2016-05-11 08:20:46

标签: javascript jquery checkbox

这可能是一个已被问过的问题,但我找不到合适的答案。所以我只是要确定一下。

现在,我知道jQuery提供了一个属性选择器,例如:checked来获取所有选中的复选框,但是您需要将它包含在选择器本身中。

但有没有办法从选择器中单独执行此操作?我的意思是,如果将选择器存储在变量中会怎样?

实施例

var checkboxSelector = $("input[name='myCheckboxes']");

因此,这将在整个代码中有一般用途,因此每次需要时我都不必编写选择器。但是如果我想使用name-attribute myCheckboxes 获取已选中复选框的总数呢?

显而易见的方法是$("input[name='myCheckboxes']:checked").length,但由于我使用的是变量checkboxSelector,因此无法包含:checked - 选择器。

我知道获得总金额的方式是在我的选择器上使用.each()并使用计数器来获得总金额,但我想知道是否有更简单的方法来实现这一目标? / p>

所以不要这样做:

var checkboxSelector = $("input[name='myCheckboxes']");
/* Do some stuff with the variable*/

/* Time to get the total amount of checked checkboxes */
var count = 0;
checkboxSelector.each(function() {
      if($(this).is(":checked"))
           count++;
});

我希望有办法像这样(或类似的东西)

var count = checkboxSelector.is(":checked").length;

现在我知道这不会给我总金额,但这只是一个例子。有没有办法通过将我的选择器存储在变量中来给我计算所有选中的复选框?最好不要使用.each()来计算。

提前致谢!

修改

为了清楚起见,我不能使用以下选择器:

var count = $("input[name='myCheckboxes']:checked").length;

因为我的选择器存储在变量中,所以我必须像这样使用它:

var checkboxSelector = $("input[name='myCheckboxes']");
/* At this point I cannot include the :checked attribute anymore */

所以$("input[name='myCheckboxes']:checked")不是一个选项。

4 个答案:

答案 0 :(得分:4)

只需在jQuery对象上调用.filter,然后将要过滤的选择器传递给它。因此,在这种情况下,将:checked选择器传递给它,它将返回仅有已检查元素的集合

 var checkboxSelector = $("input[name='myCheckboxes']");

 /* some place else */
 var numChecked = checkboxSelector.filter(":checked").length;
 console.log(numChecked);

演示

var checkboxSelector = $("input[name='myCheckboxes']");

$("button").click(function(){
  var numChecked = checkboxSelector.filter(":checked").length;
  $("#log").html(numChecked);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Check 1: <input name="myCheckboxes" type="checkbox" value="3"></label><br>
<label>Check 2: <input name="myCheckboxes" type="checkbox" value="2"></label><br>
<label>Check 3: <input name="myCheckboxes" type="checkbox" value="1"></label><br>
<label>Check 4: <input name="myCheckboxes" type="checkbox" value="0"></label><br>
<button>Get Count</button><br>
<div id="log"></div>

答案 1 :(得分:3)

如果您想将变量用于选择器,就像您说的那样:

var checkboxSelector = $("input[name='myCheckboxes']");

您可以很好地使用 jQuery的过滤器 ,如下所示:

checkboxSelector.filter(':checked').length

官方文档中的更多信息:http://api.jquery.com/filter/#filter-selector

答案 2 :(得分:2)

你可以这样做。

var count = $('input[name="myCheckboxes"]:checked').length

更新:使用filter()

var count = $('input[name="myCheckboxes"]').filter(':checked').length

答案 3 :(得分:2)

由于您已经查询了复选框,因此filter只能选中已选中的复选框:

var checkedCount = checkboxSelector.filter(":checked").length