기본 콘텐츠로 건너뛰기

vue3, javascript, 전체 체크하기, 일부 체크하기 사용 시 - vuejs

이미지
작성자:

체크박스 전체 동의,일부만 동의할 때 표시방법

html 부분

<div class="agree_box">
  <Checkbox name="agreeall" idfor="agreeall" v-model="agree.checkAll" @change="checkAll($event)" txt="전체 동의" />
  <div class="mr">
    <Checkbox name="agreecheck" idfor="agree1" value="agr1" v-model="agree.checkNo" @change="checkNo($event, 0)" txt="[필수] 만 14세 이상입니다." />
    <Checkbox name="agreecheck" idfor="agree2" value="agr2" v-model="agree.checkNo" @change="checkNo($event, 1)" txt="[필수] 개인정보 수집 및 이용동의" />
    <Checkbox name="agreecheck" idfor="agree3" value="agr3" v-model="agree.checkNo" @change="checkNo($event, 2)" txt="[필수] 제3자 정보제공 동의" />
    <Checkbox name="agreecheck" idfor="agree4" value="agr4" v-model="agree.checkNo" @change="checkNo($event, 3)" txt="[필수] ... ... 동의" />
    <Checkbox name="agreecheck" idfor="agree5" value="agr5" v-model="agree.checkNo" @change="checkNo($event, 4)" txt="[선택] ... 동의" />
  </div>
</div>


script 부분

<script setup>
import { ref } from "vue";
import Checkbox from "@/components/Checkbox.vue";

const agree = ref({
  checkAll: false,// 체크박스 전체 선택 여부
  checkNo: [],// 선택한 체크박스
})

// 전체 동의 체크 시
const checkAll = (e) => {
  // 선택 시
  if(e.target.checked) {
    document.querySelectorAll(".mr .m_checkbox input")?.forEach((val, idx) => {
      val.checked = true;
      agree.value.checkNo[idx] = val.value;
    })
  }
  // 해제 시
  else {
    document.querySelectorAll(".mr .m_checkbox input").forEach((val) => {
      val.checked = false;
      agree.value.checkNo = [];
    })
  }

  console.log("전체 선택 시 : ", agree.value.checkNo);
}

// 각각 체크 시
const checkNo = (e, n) => {
  // 선택
  if(e.target.checked) {
    agree.value.checkNo.push(e.target.value)
  }
  // 해제
  else {
    agree.value.checkNo.splice(agree.value.checkNo.indexOf(n), 1);
  }

  // 전체 선택 되었을 때
  if(agree.value.checkNo.length === document.querySelectorAll(".mr .m_checkbox input").length) {
    document.getElementById("agreeall").checked = true;
    agree.value.checkAll = true;
  }
  // 하나라도 선택 해제 했을 때
  else {
    document.getElementById("agreeall").checked = false;
    agree.value.checkAll = false;
  }

  console.log("각각 선택 시 : ", agree.value.checkNo);
}
</script>

component

<template>
  <div class="m_checkbox">
    <input type="checkbox" :name="name" :id="idfor" :value="value"><label :for="idfor">{{ txt }}</label>
  </div>
</template>

<script setup>
const props = defineProps({
  name: {
    type: String,
    defatult: undefined
  },
  idfor: {
    type: String,
    defatult: undefined
  },
  value: {
    type: String,
    defatult: undefined
  },
  txt: {
    type: String,
    default: ""
  },
})
</script>
<!--
  // 부모 컴포넌트에서 사용 시
  # name : checkbox name
  # idfor : checkbox id = label for
  # value : checkbox value
  # txt : label

  <Checkbox name="name" idfor="idfor" value="value" txt="text" />
 -->


체크박스 전체 선택, 부분 선택 시에 참고해볼 수 있다.


끝.



분류 :