Hiding the submenus after the checkbox I clicked with JS

I have a result filtering form as you can see in the attached pictures.
My problem is this:

When I uncheck checkbox number 1, I was able to uncheck the other checkboxes in the sub menu lists that follow. But:

When I uncheck checkbox 1, I want all subsequent html lists with the .sub class to change to ‘display none’. In this way, we hide the sub-location lists.

Filter Bar Preview
Filter Bar Preview

HTML source codes

<div class="section">
  <div class="subhead">Locations</div>
      <ul class="list">
        <li>
            <label>
            <input type="checkbox" name="city" value="2" class="">
            <i class="fas fa-check"></i>
            <span>Antalya</span>
            </label>
            <ul class="sub" style="display: block;">
                <li class="sub-head">Regions</li>
                <li>
                    <label>
                    <input type="checkbox" name="region" value="3" class="">
                    <i class="fas fa-check"></i>
                    <span>Alanya</span>
                    </label>
                    <ul class="sub" style="display: block;">
                        <li class="sub-head">Neighborhoods</li>
                        <li>
                            <label>
                            <input type="checkbox" name="nhood" value="5" class="">
                            <i class="fas fa-check"></i>
                            <span>Avsallar</span>
                            </label>    
                        </li>
                        <li>
                            <label>
                            <input type="checkbox" name="nhood" value="6">
                            <i class="fas fa-check"></i>
                            <span>Bektas</span>
                            </label>    
                        </li>
                        <li>
                            <label>
                            <input type="checkbox" name="nhood" value="7">
                            <i class="fas fa-check"></i>
                            <span>Buyukhasbahce</span>
                            </label>    
                        </li>
                        <li>
                            <label>
                            <input type="checkbox" name="nhood" value="28">
                            <i class="fas fa-check"></i>
                            <span>Pazarci</span>
                            </label>    
                        </li>
                    </ul>      
                </li>
            </ul>
        </li>
    </ul>
</div>

Please help me.

/* accordion for filter */
$(".section [type='checkbox']").on("change", function(e) {
e.preventDefault();
var $this = $(this);

if(!$this.hasClass("accordion-active")) {
  $($this).closest('label').next().show();
}else{
  $($this).closest('label').nextAll().has(":checkbox").first().find(":checkbox").prop('checked', false);
$($this).closest('label').nextAll().has(":checkbox").first().find(":checkbox").removeClass("accordion-active");

   // I tried this code but failed
  // $($this).closest('li').nextAll().find(".sub").hide();
}

With these codes, I can make the checkboxes that come after the checkbox I clicked unchecked or delete some classes.

But what I want is to hide the lists with the .sub class that come after the checkbox I clicked.