选择具有特定 Class 的前一个兄弟姐妹

Question

几个小时以来，我一直在努力解决这个问题，但我只是不明白自己做错了什么。我试图在单击子复选框时获取某个 class 的父复选框。

HTML:

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <div class="accordion-header" id="heading6">
              <input type="checkbox" class="form-check-input program_checkbox" id="program6" value="6" checked="">
              <a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="true" aria-controls="collapse6">Maine Ecological Reserves Program</a>
         </div>
    </div>
    <div id="collapse6" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading6" data-bs-parent="#accordionExample">
         <div class="form-group form-check pl-4">
             <input type="checkbox" class="form-check-input file_checkbox program6" id="package243" value="program_data/6/packages/1646756076.zip" checked="">
             <label class="form-check-label" for="package243">1646756076.zip</label>
         </div>
         <div class="form-group form-check pl-4">
             <input type="checkbox" class="form-check-input file_checkbox program6" id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked="">
             <label class="form-check-label" for="scriptundefined">MEER_munger.py</label>
         </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header" id="heading9">
             <input type="checkbox" class="form-check-input program_checkbox" id="program9" value="9">
             <a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse9" aria-expanded="true" aria-controls="collapse9">Vermont State Lands Continuous Forest Inventory</a>
       </div>
    </div>
    <div id="collapse9" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project
    </div>
</div>

jquery:

$(document).on('click', '.file_checkbox', function(){
         if($(".file_checkbox:checked").length < $(".file_checkbox").length) { 
            console.log($(this).parent().parent().prevAll('.program_checkbox'));
        }
   });

我尝试了很多 parent/prev/next/sibling 的组合，我快要疯了，出于某种原因，我无法转到上一个 .program_checkbox 来取消选中它...

我错过了什么？谢谢！

Answer 1

使用复选框使用 change 而不是 click
parent() select 上一级
prev() 同一级别的上一个元素
prevAll()也处于同一水平

使用 $(this).parent().parent() 到达 class="accordion-collapse collapse 元素然后您需要使用 prev() 到达前一个 accordion-item 然后使用 find('.program-checkbox') 到 select 所需元素

此外，您只能使用 .closest()

而不是重复 parent().parent()...

看下一个例子

$(document).on('change', '.program_checkbox', function(){
    $(this).closest('.accordion-item').next().find('.file_checkbox').prop("checked" , this.checked);
});

$(document).on('change', '.file_checkbox', function(){
   let file_checked = $(this).closest(".accordion-collapse").find(".file_checkbox:checked").length,
       program_checkbox = $(this).closest(".accordion-collapse").prev().find('.program_checkbox');
   if(file_checked) { 
    program_checkbox.prop("checked" , true);
  }else{
    program_checkbox.prop("checked" , false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <div class="accordion-header" id="heading6">
              <input type="checkbox" class="form-check-input program_checkbox" id="program6" value="6" checked="">
              <a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="true" aria-controls="collapse6">Maine Ecological Reserves Program</a>
         </div>
    </div>
    <div id="collapse6" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading6" data-bs-parent="#accordionExample">
         <div class="form-group form-check pl-4">
             <input type="checkbox" class="form-check-input file_checkbox program6" id="package243" value="program_data/6/packages/1646756076.zip" checked="">
             <label class="form-check-label" for="package243">1646756076.zip</label>
         </div>
         <div class="form-group form-check pl-4">
             <input type="checkbox" class="form-check-input file_checkbox program6" id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked="">
             <label class="form-check-label" for="scriptundefined">MEER_munger.py</label>
         </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header" id="heading9">
             <input type="checkbox" class="form-check-input program_checkbox" id="program9" value="9">
             <a class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse9" aria-expanded="true" aria-controls="collapse9">Vermont State Lands Continuous Forest Inventory</a>
       </div>
    </div>
    <div id="collapse9" style="margin-left:24px;" class="accordion-collapse collapse show ml-4" aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project
    </div>
</div>

选择具有特定 Class 的前一个兄弟姐妹

Selecting Previous Sibling with a Certain Class

jquery

twitter-bootstrap