haa*_*kym 23 javascript checkbox
我在表格中显示用户列表,每行都有一个复选框来选择用户,复选框值是用户的ID.所选ID依次显示在表格下方的范围内.
如何选中所有复选框并取消选中我在表格标题中单击"全选"复选框后的所有复选框？我是否与DOM进行交互以执行此操作或通过vue对象进行交互,我认为它应该是后者但是不确定如何处理看似简单的任务？!任何帮助,将不胜感激!
HTML
<div id="app">
<h4>Users</h4>
<div>
<table>
<tr>
<th>Name</th>
<th>Select <input type="checkbox" @click="selectAll"></th>
</tr>
<tr v-for="user in users">
<td>{{ user.name }}</td>
<td><input type="checkbox" v-model="selected" value="{{ user.id }}"></td>
</tr>
</table>
</div>
<span>Selected Ids: {{ selected| json }}</span>
</div>
使用Javascript/Vuejs
new Vue({
el: '#app',
data: {
users: [
{ "id": "1", "name": "Shad Jast", "email": "pfeffer.matt@yahoo.com",
{ "id": "2", "name": "Duane Metz", "email": "mohammad.ferry@yahoo.com"},
{ "id": "3", "name": "Myah Kris", "email": "evolkman@hotmail.com"},
{ "id": "4", "name": "Dr. Kamron Wunsch", "email": "lenora95@leannon.com"},
{ "id": "5", "name": "Brendon Rogahn", "email": "verlie.buckridge@yahoo.com"}
],
selected: []
},
methods: {
selectAll: function() {
// ?
}
}
})
Rif*_*fki 44
我认为@ Jeremy的回答是更清晰的方式,但它需要checked每个用户对象的属性,如果数据来自API请求则没有意义.
以下是选择/取消选择所有行的工作和更清晰的代码,而无需checked在用户对象上添加属性:
new Vue({
el: '#app',
data: {
users: [
{ "id": "1", "name": "Shad Jast", "email": "pfeffer.matt@yahoo.com" },
{ "id": "2", "name": "Duane Metz", "email": "mohammad.ferry@yahoo.com" },
{ "id": "3", "name": "Myah Kris", "email": "evolkman@hotmail.com" },
{ "id": "4", "name": "Dr. Kamron Wunsch", "email": "lenora95@leannon.com" }
],
selected: []
},
computed: {
selectAll: {
get: function () {
return this.users ? this.selected.length == this.users.length : false;
},
set: function (value) {
var selected = [];
if (value) {
this.users.forEach(function (user) {
selected.push(user.id);
});
}
this.selected = selected;
}
}
}
});<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<h4>User</h4>
<div>
<table>
<tr>
<th><input type="checkbox" v-model="selectAll"></th>
<th align="left">Name</th>
</tr>
<tr v-for="user in users">
<td>
<input type="checkbox" v-model="selected" :value="user.id" number>
</td>
<td>{{ user.name }}</td>
</tr>
</table>
</div>
</div>请注意,number行的复选框上的属性是必需的,否则您必须将用户ID selectAll方法作为字符串推送,例如selected.push(user.id.toString());
添加我自己的答案作为nhydock答案的编辑不被接受(我想？).
解决方案选择并选择所有.
HTML
<div id="app">
<h4>User</h4>
<div>
<table>
<tr>
<th>Name</th>
<th>Select <input type="checkbox" @click="selectAll" v-model="allSelected"></th>
</tr>
<tr v-for="user in users">
<td>{{ user.name }}</td>
<td><input type="checkbox" v-model="userIds" value="{{ user.id }}"></td>
</tr>
</table>
</div>
<span>Selected Ids: {{ userIds | json }}</span>
</div>
使用Javascript/Vuejs
new Vue({
el: '#app',
data: {
users: [
{ "id": "1", "name": "Shad Jast", "email": "pfeffer.matt@yahoo.com"},
{ "id": "2", "name": "Duane Metz", "email": "mohammad.ferry@yahoo.com"},
{ "id": "3", "name": "Myah Kris", "email": "evolkman@hotmail.com"},
{ "id": "4", "name": "Dr. Kamron Wunsch", "email": "lenora95@leannon.com"},
{ "id": "5", "name": "Brendon Rogahn", "email": "verlie.buckridge@yahoo.com"}
],
selected: [],
allSelected: false,
userIds: []
},
methods: {
selectAll: function() {
this.userIds = [];
if (!this.allSelected) {
for (user in this.users) {
this.userIds.push(this.users[user].id);
}
}
},
}
})
工作小提琴:https://jsfiddle.net/okv0rgrk/3747/
基本上与@Rifki 的答案相同，但检查每个元素是否存在于两者中，而不仅仅是长度。
new Vue({
el: '#app',
data: {
users: [{
"id": "1",
"name": "Shad Jast",
"email": "pfeffer.matt@yahoo.com"
},
{
"id": "2",
"name": "Duane Metz",
"email": "mohammad.ferry@yahoo.com"
},
{
"id": "3",
"name": "Myah Kris",
"email": "evolkman@hotmail.com"
},
{
"id": "4",
"name": "Dr. Kamron Wunsch",
"email": "lenora95@leannon.com"
}
],
selected: []
},
computed: {
selectAll: {
get() {
if (this.users && this.users.length > 0) { // A users array exists with at least one item
let allChecked = true;
for (const user of this.users) {
if (!this.selected.includes(user.id)) {
allChecked = false; // If even one is not included in array
}
// Break out of loop if mismatch already found
if(!allChecked) break;
}
return allChecked;
}
return false;
},
set(value) {
const checked = [];
if (value) {
this.users.forEach((user) => {
checked.push(user.id);
});
}
this.selected = checked;
}
},
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h4>User</h4>
<div>
<table>
<tr>
<th><input type="checkbox" v-model="selectAll"></th>
<th align="left">Name</th>
</tr>
<tr v-for="user in users">
<td>
<input type="checkbox" v-model="selected" :value="user.id" number>
</td>
<td>{{ user.name }}</td>
</tr>
</table>
</div>
</div>小智 5
我的答案怎么样,性能较少,易于理解？
new Vue({
el: '#app',
data: {
users: [{
"id": "1",
"name": "Shad Jast",
"email": "pfeffer.matt@yahoo.com",
'checked': false
}, {
"id": "2",
"name": "Duane Metz",
"email": "mohammad.ferry@yahoo.com",
'checked': false
}, {
"id": "3",
"name": "Myah Kris",
"email": "evolkman@hotmail.com",
'checked': false
}, {
"id": "4",
"name": "Dr. Kamron Wunsch",
"email": "lenora95@leannon.com",
'checked': false
}, ],
},
computed: {
selectAll: function() {
return this.users.every(function(user){
return user.checked;
});
}
},
methods: {
toggleSelect: function() {
var select = this.selectAll;
this.users.forEach(function(user) {
user.checked = !select;
});
this.selectAll = !select;
},
}
});<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<h4>User</h4>
<div>
<table>
<tr>
<th>Name</th>
<th>Select
<input type="checkbox" @click="toggleSelect" :checked="selectAll">
</th>
</tr>
<tr v-for="user in users">
<td>{{ user.name }}</td>
<td>
<input type="checkbox" v-model="user.checked">
</td>
</tr>
</table>
</div>
</div>