"전체" 옵션이 있는 체크박스 로직

javascript code

function applyCheckboxGeneralLogic(){
  let isChecked = this.checked;
  let formContainer = $(this).closest(".checkbox-container");
  if($(this).hasClass("checkbox-all")){
    $(formContainer).find("input[type=checkbox]").prop("checked", isChecked)
  }else{
    if(isChecked){
      if($(formContainer).find("input[type=checkbox]:not(.checkbox-all):not(:checked)").length < 1){
        $(formContainer).find("input.checkbox-all").prop("checked", true);
      }
    }else{
      $(formContainer).find("input.checkbox-all").prop("checked", false);
    }
  }
}

$("div.checkbox-container input[type=checkbox]").click(applyCheckboxGeneralLogic);

HTML

<div class="checkbox-container">

  <div class="checkbox-row">
    <input type="checkbox" class="checkbox-all" id="option-all"/>
    <label for="option-all">
      <span>전체</span>
    </label>    
    <input type="checkbox" id="option-01" value="01"/>
    <label for="option-01">
      <span>선택 1</span>
    </label>
    <input type="checkbox" id="option-02" value="02"/>
    <label for="option-02">
      <span>선택 2</span>
    </label>
        <input type="checkbox" id="option-03" value="03"/>
    <label for="option-03">
      <span>선택 3</span>
    </label>
  </div>
  
  <div class="checkbox-row">
    <input type="checkbox" id="option-04" value="04"/>
    <label for="option-04">
      <span>선택 4</span>
    </label>
    <input type="checkbox" id="option-05" value="05"/>
    <label for="option-05">
      <span>선택 5</span>
    </label>
    <input type="checkbox" id="option-06" value="06"/>
    <label for="option-06">
      <span>선택 6</span>
    </label>
    <input type="checkbox" id="option-07" value="07"/>
    <label for="option-07">
      <span>선택 7</span>
    </label>
  </div>
  
</div>