vue复选框全选全不选

最新推荐文章于 2024-09-05 11:22:00 发布
最新推荐文章于 2024-09-05 11:22:00 发布
阅读量1.9k 收藏 4
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lizhiweny/article/details/79731247
版权
<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
</ head >

< body >
< script src= "https://cdn.bootcss.com/vue/2.2.2/vue.min.js" > < / script >
< div id= "app" >
< p >
全选：
</ p >
< input type= "checkbox" id= "checkbox" v-model= "checked" @ click= "changeAllChecked()" >
< p >
多个复选框：
</ p >
< input type= "checkbox" id= "runoob" value= "Runoob" v-model= "checkedNames" >
< input type= "checkbox" id= "google" value= "Google" v-model= "checkedNames" >
< input type= "checkbox" id= "taobao" value= "Taobao" v-model= "checkedNames" >
< br >
< span >
选择的值为:{{checkedNames}}
</ span >
</ div >
< script >
var app= new Vue({
el: '#app',
data: {
checked: false,
checkedNames: [],
checkedArr:[ "Runoob", "Google", "Taobao"]
},
methods: {
changeAllChecked: function () {
var self= this;
if (! self. checked) {
self. checkedNames=[]
} else {
self. checkedNames= self. checkedArr;
}
}
},
watch:{
"checkedNames" : function(){
if( this. checkedNames. length!= this. checkedArr. length){
this. checked= false
} else{
this. checked= true
}
}
}
})
< / script >
</ body >

</ html >
Jevons__Lee
关注
专栏目录
Vue实现全选，反选，全不选
tanfei_的博客
11-12 2836
Vue实现全选，反选，全不选 在vue中实现默认选中以及获取单选/复选框的value值都会用到同一个方法，那就是在data中定义一个数组，然后用v-model=“这个数组” data: { whoms:[1,2], } 这样就会默认选中value值是1和2的，当然也可以是字符串 <td><input type="checkbox" name="nid" id="...
vue实现全选，反选，全不选功能？
杨星的博客
01-06 732
<template> <div> <button @click="checkAnti">反选</button> <button @click="checkAll">全选</button> <button @click="checkNone">全不选</button> <input type="checkbox" value="" v-model="inputAll" @click="che
Vue学习：v-model绑定文本框、单选按钮、下拉菜单、复选框等
最新发布
wangyining070205的博客
09-05 1073
v-model指令可以在组件上使用以实现双向绑定，之前学习过v-model绑定文本框和下拉菜单，今天把表单的几个控件单选按钮radio、复选框checkbox、多行文本框textarea都试着绑定了一下。 完整代码如下：
VUE 全选
weixin_30519071的博客
10-11 95
<div id="vue_det"> <p>全选:</p> <input type="checkbox" id="checkbox" v-model="checked" @change="changAllChecked"/> <label for="checkbox"> {{checked}} &lt...
vue实现下拉复选框全选与全不选
qq_42628504的博客
10-11 2615
<el-select multiple collapse-tags v-model="searchForm.auditResult" @change="changeSelect" @remove-tag="removeTag" placeholder="请选择"> <el-option label="全选" value="全选" @click.native="selectAll"></el-option> <el-option v-for="(i...
Vue全选
qq_40983361的博客
10-20 438
全选
Vue--全选
AsaZyf的博客
10-26 321
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/vue.js" &gt;&am
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...
Js实现复选框的全选、全不选反选功能代码实例
10-15
在网页开发中，经常需要实现复选框（checkbox）的全选、全不选以及反选功能，以便用户能够方便地批量操作。本篇将详细讲解如何使用JavaScript（Js）实现这一功能，并提供一个具体的代码实例。 首先，我们需要了解复...
javaScript实现复选框全选反选事件详解
01-19
本文实例为大家分享了javaScript实现复选框全选反选的具体代码，供大家参考，具体内容如下 代码 <html> <head> <meta charset=utf-8> <meta name=viewport content=initial-scale=1.0, ...
vue字典复选框全选全不选
11-18
以下是一个Vue字典复选框全选/全不选的例子： ```html <th><input type="checkbox" v-model="selectAll" @click="checkAll"> <th>Key <th>Value (value, key) in dict" :key="key"> <td><input...
Vue自定义指令实现checkbox全选功能的方法
08-27
下面小编就为大家分享一篇Vue自定义指令实现checkbox全选功能的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue.js实现购物车checkbox的全选与反选
04-13
购物车的基本操作，推荐全选与反选代码片段，简单易懂，没上传node_modules依赖，下载后自行install
vue实现全选和反选功能
08-29
主要为大家详细介绍了vue实现全选和反选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 全选与反选的实现方法(无Bug 新手看过来)
12-29
我就废话不多说，直接上代码吧！ &lt;!DOCTYPE html> &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; <div id=app> <div xss=removed> <ul xss=removed> <li v-for=(item,> &lt;input type=checkbox :value=index v-model=selectArr&gt;{{it
Vue教程全选和取消全选
baidu_41610743的博客
11-25 515
Vue教程全选和取消全选 效果展示 具体代码 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="app"> <p> 全选： </p> <input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()"> <l
使用 Vue 做全选操作
CSDN_xiaomei的博客
03-17 846
【代码】使用 Vue 做全选操作。
备用：Dijkstra C++实现
weixin_44182138的博客
11-05 975
typedef struct{ int distance, path; bool visited; }Grap; typedef struct{ int to, cost; }Edge; Grap G[maxn]; vector<Edge> E[maxn]; void Dijkstra(Grap* G, int S, int T) { G[S].distance = 0; heap.insert(S); while(!heap.empty()) { int V = heap.
vue全选功能的实现
木槿之夏
11-06 1053
<template> <div> <div> <input type="checkbox" class="check_box tui-checkbox" @click="checkAll" v-model="checked"> <span>全选</span&g...
vue在页面中应用复选框添加用户兴趣爱好选项，并添加“全选”、“反选”和“全不选”按钮，实现复选框的全选、反选和全不选操作。
07-14
在Vue中应用复选框添加用户兴趣爱好选项，并实现全选、反选和全不选操作，可以按照以下步骤进行： 1. 在Vue的data中添加一个数组来存储用户的兴趣爱好选项和一个变量来控制全选状态： ```javascript data() { return { interests: ['篮球', '足球', '游泳', '音乐'], selectAll: false } } ``` 2. 在页面中使用v-for指令遍历兴趣爱好选项，并绑定复选框的值和选中状态： ```html <div v-for="interest in interests" :key="interest"> <input type="checkbox" :value="interest" v-model="selectedInterests"> <label>{{ interest }}</label> </div> ``` 3. 添加全选、反选和全不选按钮，并绑定对应的点击事件： ```html <button @click="selectAllInterests">全选</button> <button @click="invertSelection">反选</button> <button @click="deselectAllInterests">全不选</button> ``` 4. 在Vue的methods中实现点击事件的处理逻辑： ```javascript methods: { selectAllInterests() { this.selectedInterests = this.interests; }, invertSelection() { this.selectedInterests = this.selectedInterests.length === this.interests.length ? [] : this.interests; }, deselectAllInterests() { this.selectedInterests = []; } } ``` 这样就实现了在Vue页面中应用复选框添加用户兴趣爱好选项，并实现全选、反选和全不选操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值