[Team 제주 넘는 차] 체크박스 '전체' 항목 로직

요구 사항

1. 체크박스 중 '전체' 항목의 경우, 다른 항목들 중 하나라도 체크 해제 되면 체크가 해제 되어야 하고, '전체'에 체크 되면 모든 항목에 체크가 되어야 한다.

2. '전체' 항목에 체크 해제되면 모든 항목이 체크 해제 되어야 하고 체크되면 모든 항목이 체크 되어야 함

 

1번부터 코드를 짰다.

reduce()를 이용해 구현했다.

// views/main.vue

// ...

<script>
export default {
  data: function () {
    return {
      ranks: [
        {
          name: '경형',
          value: true
        },
        {
          name: '소형',
          value: true
        },
        {
          name: '중형',
          value: true
        },
        {
          name: '대형',
          value: true
        },
        {
          name: '수입',
          value: true
        },
        {
          name: '승합RV',
          value: true
        },
        {
          name: 'SUV',
          value: true
        }
      ],
      
// ...

allRanks: true, // '전체' 체크박스 값

// ...

computed: {
    allRanksCheck() {
      const result = this.ranks.reduce((count, data) => (data['value'] === true ? count + 1 : count), 0)
      // console.log(result)
      if (result >= 7) {
        // console.log('전체 체크 true')
        return (this.allRanks = true)
      } else if (result < 7) {
        // console.log('전체 체크 해제')
        return (this.allRanks = false)
      }
    },
    
// ...

  watch: {
    allRanksCheck() {}
  },
  
// ...

ranks 안에 있는 value가 true일 경우를 count하여 count 값이 7 이상일 경우 전체 체크 true, 7 미만일 경우 전체 체크 false가 되게 구현했다.

computed에 함수를 짜고 watch에서 값이 실시간으로 변할 때 감지할 수 있도록 짰다. computed로 구현 가능하면 watch를 안쓰는게 좋다고 들었는데(watch의 경우 꼬이면 답이 없음) 원리를 아직 완벽히 이해하진 못했다.

설명

 

결과

모든 항목에 체크 되어 있으면 전체에도 체크 됨

하나라도 체크 해제되면 전체도 체크 해제됨

 

 

2번

// ...

        <div><input v-model="allRanks" type="checkbox" @click="selectAllRanks()" /><label>전체</label></div>
          <div v-for="(rank, index) in ranks" :key="index">
            <input v-model="rank.value" type="checkbox" name="ranks" /><label>{{ rank.name }}</label>
          </div>
        </div>
        <div class="fuel">
          <h2 class="sub">연료</h2>
          <div><input v-model="allFuels" type="checkbox" @click="selectAllFuels()" /><label>전체</label></div>
          <div v-for="(fuel, index) in fuels" :key="index">
            <input v-model="fuel.value" type="checkbox" name="fuels" /><label>{{ fuel.name }}</label>
          </div>
        </div>
      </div>

// ...

</template>
<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script>
<script>
export default {
  data: function () {
    return {
      ranks: [
        {
          name: '경형',
          value: true
        },
        {
          name: '소형',
          value: true
        },
        {
          name: '중형',
          value: true
        },
        {
          name: '대형',
          value: true
        },
        {
          name: '수입',
          value: true
        },
        {
          name: '승합RV',
          value: true
        },
        {
          name: 'SUV',
          value: true
        }
      ],
      fuels: [
        {
          name: '휘발유',
          value: true
        },
        {
          name: '경유',
          value: true
        },
        {
          name: 'LPG',
          value: true
        },
        {
          name: '전기',
          value: true
        },
        {
          name: '하이브리드',
          value: true
        }
      ],
      allRanks: true,
      allFuels: true,

// ...

  methods: {
    selectAllFuels() {
      if (this.allFuels === true) {
        return this.fuels.forEach(element => (element.value = false))
      } else {
        return this.fuels.forEach(element => (element.value = true))
      }
    },
    selectAllRanks() {
      // console.log('allRanks 실행')
      if (this.allRanks === true) {
        return this.ranks.forEach(element => (element.value = false))
      } else {
        return this.ranks.forEach(element => (element.value = true))
      }
    },

// ...

click 이벤트에 selectAllFuels(연료 선택), selectAllRanks(차종 선택) 함수를 걸어 '전체' 체크 value에 따라서 각각 fuels와 ranks 안에 있는 값들이 모두 false / true가 되게 만들었다.

 

결과

전체 체크박스 해제 시 모두 해제됨

전체 체크박스 체크 시 모두 체크됨