jQuery 计数 div 中的复选框并显示 : block but not display: none

Question

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

到目前为止我已经尝试过:

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

似乎总是会发生的是，如果包含“visible”，那么无论其父级 div 是 display:none 还是 block，它总是计数 0 个复选框，如果我不包含“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