I have to count multiple elements. It's necessary to check, if the checkbox is checked and the parent div isn't hidden (display: none;)

I tried multiple things but couldn't find a solution.

My last tests were these: 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);
}

The Problem is this snippet:

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

And the HTML is looking like this: (this will not be counted)

<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>

(this is counted)

<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>

The Result for this is always 2 and not 1..

I hope you can help me with this problem!

Greets.

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

Im not sure that $(this) in the filter function is referring to the element.

try changing your filter function to

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