Selecting Previous Sibling with a Certain Class-CodePudding

I've been trying to figure this out for hours and I'm just not understanding what I'm doing wrong. I'm trying to get the parent checkbox of a certain class when the child checkbox is clicked.

HTML:

<div  id="accordionExample">
    <div >
        <div  id="heading6">
              <input type="checkbox"  id="program6" value="6" checked="">
              <a  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;"  aria-labelledby="heading6" data-bs-parent="#accordionExample">
         <div >
             <input type="checkbox"  id="package243" value="program_data/6/packages/1646756076.zip" checked="">
             <label  for="package243">1646756076.zip</label>
         </div>
         <div >
             <input type="checkbox"  id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked="">
             <label  for="scriptundefined">MEER_munger.py</label>
         </div>
    </div>
    <div >
        <div  id="heading9">
             <input type="checkbox"  id="program9" value="9">
             <a  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;"  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'));
        }
   });

I've tried so many combinations of parent/prev/next/sibling I'm losing my mind, and for some reason I can't get to the previous .program_checkbox to uncheck it...

What am I missing? Thank you!

CodePudding user response：

With checkbox use change instead of click
parent() select one level up
prev() previous element on same level
prevAll() also on the same level

With $(this).parent().parent() you reached to snippet-code-js lang-js prettyprint-override">$(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  id="accordionExample">
    <div >
        <div  id="heading6">
              <input type="checkbox"  id="program6" value="6" checked="">
              <a  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;"  aria-labelledby="heading6" data-bs-parent="#accordionExample">
         <div >
             <input type="checkbox"  id="package243" value="program_data/6/packages/1646756076.zip" checked="">
             <label  for="package243">1646756076.zip</label>
         </div>
         <div >
             <input type="checkbox"  id="scriptundefined" value="program_data/6/scripts/MEER_munger.py" checked="">
             <label  for="scriptundefined">MEER_munger.py</label>
         </div>
    </div>
    <div >
        <div  id="heading9">
             <input type="checkbox"  id="program9" value="9">
             <a  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;"  aria-labelledby="heading9" data-bs-parent="#accordionExample">No files for this project
    </div>
</div>