Как проверить, невидимый элемент из-за родителя скрыт благодаря его классу

Question

У меня есть массив флажков и вы хотите их переключить (check/uncheck) как группу, но только те, которые действительно видны.

<style id=dynamicStyle>DIV.filterLevel3{display:none;}</style> 
<div class="filterLevel3"> 
    <input type=checkbox id=cbx_123456 name=cbx_123456 class=cbxForSwitch> 
    ... more elements belonging to the checkbox, 
    ... always hidden on shown together 
</div> 

ДинамическийStyle.innerHTML может быть изменен другим javascript. Изменение видимости отлично работает, но мне нужно выбрать все флажки класса «cbxForSwitch», которые в настоящее время видны.

Я видел много примеров, используя jQuery, но все они проверяли атрибуты css указанного элемента или его стиль и т. Д. Мне нужно получить реальную видимость после того, как исследователь выполнил все правила стиля, включая наследование.

Answer 1

Используя jQuery, вы можете получить атрибуты css родительского элемента, используя функцию parent(). Если у родительского свойства «display» css установлено значение none, вы можете установить флажок, используя функцию jquery prop().

$('input[type=checkbox]').each(function() { 
    if ($(this).parent().css('display') !== 'none') { 
    $(this).prop('checked', true); 
    } 
}); 

Вот JSFiddle