<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="toggleAllCheckboxes">전체선택</button>
<br>
<div v-for="(item, index) in items" :key="index">
<input type="checkbox" v-model="item.isChecked"> {{ item.name }}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
items: [
{ name: 'apple', isChecked: false },
{ name: 'google', isChecked: false },
{ name: 'microsoft', isChecked: false },
{ name: 'tesla', isChecked: false }
] // 체크박스 항목들
},
methods: {
toggleAllCheckboxes() {
const areAllChecked = this.items.every(item => item.isChecked);
// 모든 체크박스의 isChecked 상태를 현재 상태와 반대로 설정
this.items.forEach(item => (item.isChecked = !areAllChecked));
}
}
});
</script>
</body>
</html>checkbox element를 v-model로 data의 items의 isChecked속성과 양방향 바인딩 시킨 후
전체선택 버튼 클릭 시 items를 순회하며 isChecked를 현재 상태와 반대로 설정
'💻 it > development' 카테고리의 다른 글
| [JavaScript] htmlToPdf convert(feat. html2pdf) (0) | 2025.11.18 |
|---|---|
| [base64] 이미지를 base64로 인코딩 (0) | 2025.11.18 |
| [springBoot] 인터셉터를 통해 메뉴 접근 관리 (0) | 2025.11.16 |
| [thymeleaf] 동적 url 생성(feat. @{/url}) (0) | 2025.11.16 |
| [JavaScript] 객체 해체 할당(Object Destructuring Assignment)(feat. ES6) (0) | 2025.11.16 |
댓글