javascript - 仅选择/取消选择可见复选框

Question

我有一个 Accordion ，每个 Accordion 项目都有复选框，一些 Accordion 项目用 style="display:none;" 属性隐藏。

这是 html dom 层次结构的屏幕截图

这是html代码

<div id="testcases" class="accordion js-accordion">
    <div class="accordion__item js-accordion-item" id="0001" name="com.edgecase.TS_EdgeHome">
    <div class="accordion-header js-accordion-header">
        <input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-0001" value="tc_Login" aria-hidden="true" style="display: none;">
        <label for="labelauty-0001">
            <span class="labelauty-unchecked-image"></span>
            <span class="labelauty-checked-image"></span>
        </label>tc_Login</div>
    <div class="accordion-body js-accordion-body">
        <div class="accordion-body__contents"></div>
    </div>
    </div>
    <div class="accordion__item js-accordion-item active"></div>
    
    <div class="accordion__item js-accordion-item" id="00011" name="com.edgecase.TS_EdgeHome">
    <div class="accordion-header js-accordion-header">
        <input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-00011" value="tc_Logout" aria-hidden="true" style="display: none;">
        <label for="labelauty-00011">
            <span class="labelauty-unchecked-image"></span>
            <span class="labelauty-checked-image"></span>
        </label>tc_Logout</div>
    <div class="accordion-body js-accordion-body">
    <div class="accordion-body__contents"></div>
    </div>
    </div>
    <div class="accordion__item js-accordion-item"></div>
  
    <div class="accordion__item js-accordion-item" id="1001" style="display:none;" name="com.edgecase.TS_EdgePanel">
    <div class="accordion-header js-accordion-header">
        <input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-1001" value="tc_AddContract" aria-hidden="true" style="display: none;">
        <label for="labelauty-1001">
            <span class="labelauty-unchecked-image"></span>
            <span class="labelauty-checked-image"></span>
        </label>tc_AddContract</div>
    <div class="accordion-body js-accordion-body">
    <div class="accordion-body__contents"></div>
    </div>  
    </div>
    <div class="accordion__item js-accordion-item"></div>
    
    <div class="accordion__item js-accordion-item" id="2001" style="display:none;" name="com.edgecase.TS_EdgeRoute">
    <div class="accordion-header js-accordion-header">
        <input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2001" value="tc_VerifyContract" aria-hidden="true" style="display: none;">
        <label for="labelauty-2001">
            <span class="labelauty-unchecked-image"></span>
            <span class="labelauty-checked-image"></span>
        </label>tc_VerifyContract</div>
    <div class="accordion-body js-accordion-body">
    <div class="accordion-body__contents"></div>
    </div>  
    </div>
    <div class="accordion__item js-accordion-item"></div>
    
</div>

我创建了一个函数来选择/取消选择所有复选框，但它也会检查隐藏的复选框。

  function toggle(source){
    checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
    for(var i=0, n=checkboxes.length; i<n; i++) {
      checkboxes[i].checked = source.checked;
    }
  }

使用下面的代码我可以将属性添加到标签标记

checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox')
for(var i=0, n=checkboxes.length; i<n; i++) {
  var id = checkboxes[i].attributes.id
  var id = id.textContent
$('label[for="'+id+'"]').attr("aria-checked","true");
}

我需要选择/取消选择没有 style="display:none;" 属性的 div 元素的所有复选框。(即我需要选择/取消选择仅可见的复选框)并添加 aria-checked="true" 如果选中，则添加到标签标签，否则添加 aria-checked="false" 用于标签标签内的值。

有人可以帮我解决这个问题吗？

Answer 1

您可以验证您的复选框是否显示如下:

for(var i=0, n=checkboxes.length; i<n; i++) {
  if (checkboxes[i].style.display != "none"){
      checkboxes[i].checked = true;
  }
}