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 可以很容易地 select 选中复选框，它是可见 div:

的子元素

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

请注意，:visible select 或者，自版本 3 发布以来，发生了重大变化：

jQuery 3 slightly modifies the meaning of :visible (and therefore of :hidden). Starting with this version, elements will be considered :visible if they have any layout boxes, including those of zero width and/or height. For example, br elements and inline elements with no content will be selected by the :visible selector.

Jquery 计算复选框选中的位置和父显示块

Jquery Count where checkbox checked and parent display block

html

javascript

jquery

hidden

count