非表示行の判定方法がわからない

Question

HTMLで作成した表について、非表示になっている行のみ処理を行わないようにしたいです。
処理としては現在、ヘッダーのチェックボックスをクリックした際にすべての行のチェックボックスが連動するようになっているのですが、非表示になっている表示になっている行については連動しないようにしたいです。
非表示については、前回に質問させていただいた内容で、ヘッダーのフィルターで選択されていない項目をCSSにて非表示にしております。

.style.display !="none"にて判定ができると思うのですが、現状うまくいっておりません。
つたない質問かもしれませんがご回答のほどよろしくお願いいたします。

$(function(){
	$("#checkall").on('click', function(){
		var wTABLE  = document.getElementById(gTabldID);
		var wTR     = wTABLE.rows;
		for(var i=gTfStartRow; i < wTR.length; i++){
			var wTD     = wTABLE.rows[i].cells;
			for(var j=0; j < wTD.length; j++){
		if(wTR[i].cells[j].style.display !="none")
		{
			if($(this).is(':checked')){
				$("input[id^='checkbox']").prop({'checked':true});
			}else{
				$("input[id^='check']").prop({'checked':false});
			}
		}
		}
	}
	});
});

<th><input type="checkbox" name="checkall" id="checkall" />チェック</th>

#filterTable tr[cmanFilterNone]{
  display    : none;

Answer 1

jQueryの場合、「:visible」や「:hidden」がつかえます

<script>
$(function(){
  $('#btn').on('click',function(){
    $(':checkbox:visible').prop('checked',true);
    console.log($(':checkbox:checked').length);
  });
});
</script>
<table>
<tr><td><input type="checkbox"></td></tr>
<tr style="display:none"><td><input type="checkbox"></td></tr>
<tr><td><input type="checkbox"></td></tr>
<tr><td><input type="checkbox"></td></tr>
<tr style="display:none"><td><input type="checkbox"></td></tr>
<tr><td><input type="checkbox"></td></tr>
</table>
<input type="button" value="全てチェック" id="btn">

Comments

[miiisya]

前回に引き続きご回答ありがとうございます。
visibleが使えることは調べて分かっていたのですが、教えていただいた方法で使えることは知らず大変参考になりました。
ありがとうございます。

Answer 2

ある要素が display: none になったときでも、その子孫要素の .style.display は none にはなりません。なので、wTABLE.rows[i].style.display != 'none' とチェックする必要があります。

Comments

[miiisya]

前回に引き続きご回答ありがとうございます。
教えていただいた方法を試したのですが、うまくいきませんでした。
yambejp様に教えていただいた方法が、ループを使わずに処理できたため、今回はそちらを採用させていただきました。
CSSについては特に知識が不足しているため、子孫要素は全く意識できていなかったため、勉強させていただきます。