Question

我想使用jquery计算div中复选框的数量，但仅当div显示设置为block时，而不是当它设置为none时。这会根据按下按钮而改变。

到目前为止我已经尝试过了：

$("div:#divid:visible").find('input:checkbox').length
$('input:checkbox:visible').length
$("div:#divid").find('input:checkbox.visible').length

似乎总是会发生，如果包含'visible'，那么它总是会计数0个复选框，无论它们的父div是否为display：none或block，如果我不包含'visible'，它总是计算所有的复选框，再次忽略父div的显示状态。复选框本身没有显示属性。

Answer 1

你想要的第一个额外:：

$("div#divid:visible").find('input:checkbox').length
//    ^---- No : here

虽然开头的div毫无意义（无害，但毫无意义），除非id="divid"的元素有时可能是div而不是其他时间而你想跳过如果它不是div。更有可能，只是：

$("#divid:visible").find('input:checkbox').length

虽然实际上，你可以只使用一个选择器而不是调用find：

$("#divid:visible input:checkbox").length

另请注意，您需要确保相关的div在DOM中并且在上面的代码运行时要检查display设置，因为它会查看截至该时刻。

示例 - Live Copy | Source

HTML：

<div id="div1">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</div>
<div id="div2" style="display: none">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
</div>

JavaScript的：

(function($) {

  display('$("#div1:visible input:checkbox").length = ' + $("#div1:visible input:checkbox").length);
  display('$("#div2:visible input:checkbox").length = ' + $("#div2:visible input:checkbox").length);

  function display(msg) {
    $("<p>").html("<code>" + msg + "</code>").appendTo(document.body);
  }
})(jQuery);

结果：

$("#div1:visible input:checkbox").length = 5

$("#div2:visible input:checkbox").length = 0

Answer 2

试试这个

  $("#divid:visible").find('input[type=checkbox]').length;

带有display：block但不显示的div中的jQuery count复选框：none

2 个答案: