전체동의 체크박스

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  display: inline-block;
  cursor: pointer;
  line-height: 22px;
  padding-left: 22px;
  background: url("@/assets/image/button/checkbox/icon_check.png") left/22px
    no-repeat;
}

input[type="checkbox"]:checked + label {
  background-image: url("@/assets/image/button/checkbox/icon_check_active.png");
}

 <!-- <a-form-item>
          <input
            type="checkbox"
            id="all-box"
            value="isAllowAllchecked"
            v-model="checkAll"
            @change="onCheckAllChange"
          />
          <label for="all-box">전체 동의</label>

          <input
            type="checkbox"
            id="box1"
            value="isAllowTermsOfService"
            v-model="checkedList"
          />
          <label for="box1">[필수] 이용약관 동의</label>

          <input
            type="checkbox"
            id="box2"
            value="isAllowPersonalCreditInformation"
            v-model="checkedList"
          />
          <label for="box2">[필수] 개인 신용 정보 수집 이용 동의.</label>

          <input
            type="checkbox"
            id="box3"
            value="isAllowPersonalCreditInformation-3rd"
            v-model="checkedList"
          />
          <label for="box3">[필수] 개인 신용 정보 제3자 제공 동의.</label>

          <input
            type="checkbox"
            id="box4"
            value="isAllowMarketing"
            v-model="checkedList"
          />
          <label for="box4">[선택] 투자정보 수신 동의.</label>
          {{ checkedList }}
        </a-form-item> -->

const plainOptions = [
  "isAllowTermsOfService",
  "isAllowPersonalCreditInformation",
  "isAllowPersonalCreditInformation-3rd",
  "isAllowMarketing",
];

const state = reactive({
      indeterminate: false,
      checkAll: false,
      checkedList: [],
    });

    const onCheckAllChange = (e: any) => {
      Object.assign(state, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
      });
    };
    watch(
      () => state.checkedList,
      (val) => {
        state.indeterminate = !!val.length && val.length < plainOptions.length;
        state.checkAll = val.length === plainOptions.length;
      }
    );
    
       return {
      onFinish,
      onFinishFailed,
      loginForm,
      loading,
      login,
      ...toRefs(state),
      plainOptions,
      onCheckAllChange,
    };