Mäqs Wma Mäqs Wma - 2 months ago 16
HTML Question

Jquery Count where checkbox checked and parent display block

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/

Answer

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;