<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <script> window.onload = function () { var c = new Vue({ el:'.box', data:{ selectArr: [], proData:[{ "name": "111" }, { "name": "222" }, { "name": "333" }, { "name": "444" }] }, methods:{ selectAll:function (event) { var _this = this; console.log(event.currentTarget) if (!event.currentTarget.checked) { this.selectArr = []; } else { //实现全选 _this.selectArr = []; _this.proData.forEach(function(item, i) { _this.selectArr.push(item.name); }); } } } }) } </script> </head> <body> <div class="box"> <div class="hello"> <ul> <li v-for="(index, item) in proData"> <label :for="index"> <input :id="index" type="checkbox" :value="item.name" v-model="selectArr"> </label>{{item.name}} </li>: </ul> <button type="">删除</button>{{selectArr}} <label> <input type="checkbox" class="checkbox" @click="selectAll" />全选 </label> </div> </div> </body> </html>
vue.js实现checkbox全选
最新推荐文章于 2024-07-30 16:26:17 发布