Vue全選反選複選框實現
阿新 • • 發佈：2021-02-14
技術標籤：前端
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script> </head> <body> <div id="app"> <div> <input type="checkbox" id="all" v-model="checked" @change="checkAll" /> <!-- 全選 --> <label for="all">{{selectAll}}</label> </div> <div v-for="(item,index) in list"> <!-- 複選框必須有索引值，否則選中任何一個，其他都會選中，v-model雙向繫結 --> <!-- v-model必須繫結建立不同的物件 --> <input type="checkbox" v-model="item.checkModel" :key="item.index" @change="checkBox(item)" />{{item.seller}} </div> </div> </body> <script> var app = new Vue({ el: "#app", data: { list: [{ seller: "商家1", }, { seller: "商家2", }] //資料 , selectAll: '全選', checkModel: [], checked: false, //控制是否全選 }, methods: { checkAll() { // 觸發全選按鈕事件 // 1.獲取下面所有的需要選中的複選框 // 2.給每一個複選框設上checked:true的狀態 // 如果為沒有一個選中的複選框 if(this.checked) { this.list.forEach((item) => { item.checkModel = true }) } else { this.list.forEach((item) => { item.checkModel = false }) } }, checkBox(item) { // 1.獲取總複選框數量 // 2.迴圈遍歷選中的總數大於等於list if(this.list.every(item => item.checkModel)) { // 3.全選按鈕選中 this.checked=true } else { // 4.全選按鈕不選中 this.checked=false } } } }) </script> </html>