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

Question

我有一个手风琴，每个手风琴项目都有复选框，一些手风琴项目被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;
  }
}

Answer 2

//find by name, filter for only those that are visible
$(document.getElementsByName('inputLableautyNoLabeledCheckbox')).filter(':visible').each( function () {
  //change the state
  this.checked = source.checked;
  //find the label for the element and change it's aria state
  $('label[for="'+ this.id +'"]').attr("aria-checked", source.checked);
} );

Answer 3

使用 jquery 会更容易，因为我在您的问题中看到 jquery 标记。

$("input:checkbox:visible").not("#chkDisplayAll").prop('checked', $(this).prop('checked'));

请看下面的片段：

$(document).ready(function () {
    $("#chkCheckAll").click(function () {
        $("input:checkbox:visible").not("#chkDisplayAll").prop('checked', $(this).prop('checked'));
    });
    $("#chkDisplayAll").click(function(){
    	if($("#chkDisplayAll").is(":checked"))   
        $("input:checkbox.not-visible").show();
    else
        $("input:checkbox.not-visible").hide();
    })
    
    $("input:checkbox.not-visible").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="chkCheckAll" /> Check All
<input type="checkbox" id="chkDisplayAll" /> Display All
<br/>
<input type="checkbox" class="checkBoxClass not-visible" id="Checkbox1" />
<input type="checkbox" class="checkBoxClass" id="Checkbox2" />
<input type="checkbox" class="checkBoxClass not-visible" id="Checkbox3" />
<input type="checkbox" class="checkBoxClass" id="Checkbox4" />
<input type="checkbox" class="checkBoxClass not-visible" id="Checkbox5" />

你也可以测试一下here