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对其进行测试

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

3 个答案: