1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type='checkbox' class='input-checkbox' v-on:click='checkedAll($event)'>全选
<button @click="checkBtn($event)">全选</button>
<template v-for='checkb in checkboxData'>
<input type='checkbox' name='checkboxinput' class='input-checkbox' v-model='checkboxModel' value='{{checkb.id}}'>{{checkb.value}}
</template>
</div>
<div id="app1">
<input type="checkbox" value="Jack123" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
checkboxData:[{
id:'1',
value:'苹果'
},{
id:'2',
value:'荔枝'
},{
id:'3',
value:'香蕉'
},{
id:'4',
value:'火龙果'
}],
checkboxModel:['3','1','4'],
checked:""
},
methods:{
checkedAll: function(event) {
//event.currentTarget 取得当前的DOM元素
var ischeck = event.currentTarget.checked
var _this = this;
if (!ischeck) {//实现反选
console.log(ischeck)
_this.checkboxModel = [];
// console.log(_this.checkboxModel);
}else{//实现全选
console.log(ischeck)
_this.checkboxModel = [];
_this.checkboxData.forEach(function(item) {
_this.checkboxModel.push(item.id);
});
}
},
checkBtn:function(event){
var btnDom = event.currentTarget;
var _this = this;
if(btnDom.innerHTML == "全选")
{
_this.checkboxModel = [];
_this.checkboxData.forEach(function(item) {
_this.checkboxModel.push(item.id);
btnDom.innerHTML = "取消全选"
});
}
else
{
_this.checkboxModel = [];
btnDom.innerHTML = "全选"
}
}
}
})
var vm1 = new Vue({
el: '#app1',
data: {
checkedNames: []
}
})
</script>
</body>
</html>
|