选中的Jquery计数复选框和父显示块

Question

我要数多个元素。如果选中了复选框，并且父div没有隐藏，则有必要进行检查(显示: none;)

我尝试过多种方法，但都找不到解决办法。

我最后的测试是: Javascript

function triggerCounter() {
  countAll = $('.form-border').filter(function() {
    return $(this).css('display') !== 'none';
  }).length;
  countFilled = $('input[type="checkbox"]').filter(function() {
    return ($(this).prop('checked') == true && $(this).parent().css('display') !== 'none' );
  }).length;

  countPerc = (countFilled*100)/countAll;
  $('#progressbar').css('width', countPerc + '%');
  $('#progressText').text(countFilled + ' / ' + countAll);
}

问题是这个片段：

countFilled = $('input[type="checkbox"]').filter(function() {
    return ($(this).prop('checked') == true && $(this).parent().css('display') !== 'none' );
}).length;

HTML看起来是这样的：(这是不算的)

<div class="form-border transition-2" style="display: none;">
<div class="row">
    <div class="col-xs-10">
        <p class="form-header">Bundesland</p>
        <p class="form-answer">
        <select id="EF3" name="EF3" class="form-select-style form-input-style">
            <option value="1">Test</option>
        </select>
    </div>
    <div class="col-xs-2 text-right">
        <input type="checkbox" name="deleteEF3" id="deleteEF3" class="form-delete-checkbox" checked="checked">
    </div>
</div>

​

(这是计数)

<div class="form-border transition-2">
<div class="row">
    <div class="col-xs-10">
        <p class="form-header">Bundesland</p>
        <p class="form-answer">
        <select id="EF2" name="EF2" class="form-select-style form-input-style">
            <option value="1">Test</option>
        </select>
    </div>
    <div class="col-xs-2 text-right">
        <input type="checkbox" name="deleteEF2" id="deleteEF2" class="form-delete-checkbox" checked="checked">
    </div>
</div>

​

结果总是2，而不是1。

我希望你能帮我解决这个问题！

打招呼。

https://jsfiddle.net/Lwrqy6qt/3/

Answer 1

我不确定过滤器函数中的$(this)是否指的是元素。

尝试将筛选器函数更改为

  countFilled = $('input[type="checkbox"]').filter(function(i,element) {
      return ($(element).prop('checked') == true && $(element).parent().height() > 0 );
  }).length;

Answer 2

使用jQuery，很容易选择复选框，该复选框是可见div的子元素：

$('div:visible > input[type=checkbox]:checked');

请注意，自从版本3发布以来，*可见选择器发生了重大变化：

jQuery 3稍微修改了:可视(因此是:隐藏的)的含义。从这个版本开始，元素将被考虑:如果它们有任何布局框，包括零宽度和/或高度的布局框，则它们是可见的。例如，不含任何内容的br元素和内联元素将由“可见”选择器选择。