vue实现全选,全不选和单个选择的方法

最新推荐文章于 2023-02-21 14:42:05 发布
最新推荐文章于 2023-02-21 14:42:05 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： vue 文章标签： vue vue中checkbox用法 vue中全选.全不选方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43627981/article/details/107224621
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>checkbox</title>
</head>
<style>
    .label {
        padding: 5px 10px;
        border: 1px solid rgb(104, 67, 67);
        border-radius: 5px;
        cursor: pointer;
    }
    [v-cloak]{
        display:none !important; //防止刷新页面看见源码
    }
</style>

<body>
    <div id="app" v-cloak>
        <label class="label">
            <input type="checkbox" v-model='isCheckAll' @click="checkAll" />
             全选
        </label>
        <div v-for="(item,index) in tempData">
            <label style="cursor: pointer;"> 
                <input type="checkbox" :value="item" v-model="saveInfo" @change="singleCheck">
                {{item.country}}
            </label>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                isCheckAll: false,
                saveInfo: [],//保存选择的数据,用于上传后台
                tempData: [
                    { id: 0, country: '中国' },
                    { id: 1, country: '美国' },
                    { id: 2, country: '俄罗斯' },
                    { id: 3, country: '英国' },
                    { id: 4, country: '法国' }
                ],
            }
        },
        methods: {
            singleCheck() {
                if (this.saveInfo.length === this.tempData.length) {
                    this.isCheckAll = true;
                } else {
                    this.isCheckAll = false;
                }
                console.log(this.saveInfo)
            },

            checkAll() {
                let that = this;
                this.tempData.forEach(item => {
                    if (!that.isCheckAll) {
                        that.saveInfo.push(item)
                    } else 
                        that.saveInfo = [];
                    }

                });
                console.log(this.saveInfo)
            },
        }
    })

</script>

</html>

 

 

芈鹿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 代码控制复选框的选中和取消选中
qq_41409120的博客
08-31 1万+
关于vue中的复选框，官方文档在这儿 其中它是通过这样的方式来控制选中和取消选中的： 复制到idea里面： 可以看到，直接通过将checked设置为true或者false就可以控制选中和取消选中。 但为什么我用就不行呢？ 几经调试，最后发现，官方这段例子中没加 a-checkbox-group ，而我的代码中是将 a-checkbox 包在 a-checkbox-group 中的。这种情况下， a-checkbox 中对:checked的绑定控制将失效。 那要怎么做呢？ 方法利用 a-checkbox-
10.vue中checkbox实现单选效果，且同时禁用其他选项?
weixin_45651609的博客
06-25 1288
为什么有radio不用，偏偏要使用CheckBox实现单选效果呢？ 答案是如果想同时实现单选，又实现可以一个都不选的话。只能使用CheckBox来做了。 主要是判断禁用条件：有一个选项被选了且不是被选项 <input v-model="item.answer" :disable="checkedIndex!=key && checkedIndex!='reset'" @input="choose(key)"> data: { checkedIndex: 'reset' },
vue 实现全选全不选的示例代码
12-09
全选功能可以说是前端开发中非常常见的一个功能，以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据，用数据驱动dom，也是vue框架的一个核心思想，思想转变过来，对功能的实现自然容易理解一些。 例如下面这个简单的demo 按照jQuery的思想来做的话，要选中全选checkbox和所有的checkbox项，分别注册选中事件，判断选中状态来给相关的checkbox设置对应的状态，这就涉及到很多的dom操作。 下面就看一下vue数据驱动dom的思想来实现这一功能。 vu
vue实现全选和反选功能
08-29
主要为大家详细介绍了vue实现全选和反选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 实现搜索的结果页面支持全选与取消全选功能
10-17
主要介绍了vue 实现搜索的结果页面支持全选与取消全选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue实现“全选/全不选/反选”的三个方法
我管它叫“知勤者笔记”，主要用来记录和分享我的日常生活与学习经历
02-21 7986
【代码】vue实现“全选/全不选/反选”的三个方法。
Vue实现全选、反选、全不选功能
功能总结
03-03 5241
Vue实现全选、反选、全不选功能
vuejs实现checkbox全选和全不选
CodingNoob
05-16 6032
最近一直在用vue，有个功能是要实现全选和取消全选的功能，于是想了一下要怎么做。 效果如下： 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue实现checkbox全选和全不选&lt;/t
Vue三种方式实现全选全不选：@click点击事件方式、computed计算属性方式和watch监听器方式
m0_37922443的博客
04-26 1861
@click点击事件方式：全选按钮添加点击事件checkAll，点击全选按钮时改变选项的点击状态。下面的选项按钮用一个div包裹，并添加change事件来监听是否全选。 注：click事件是点击之后，视图里的数据还没有更新到data数据里，所以导致data数据不是最新的状态，需要取反。change事件是视图绑定的数据发生了改变，才会去执行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U.
vue3 全选 以及取消全选功能
weixin_44325341的博客
04-07 7465
首先引用elementplus的模板checkbox多选框 具体需要实现的功能有： 1.点击全选按钮 所有的小框框都是选中状态 2.当为选中状态时，点击任意条例选中框取消选中状态，则全选也随之取消 3.当手动一个一个将下面的条例选中 全部的条例都是选中状态时 全选自动是选中状态 具体效果图如下 大概思路： 准备两个数组 放数据的id（因为id是唯一的） 一个将所有数据的id都放进去 另一个将选中的id放进去 通过判断二者是否完全相等来判断是否全选 ...
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.js实现的全选与全不选功能示例【基于elementui】
10-17
主要介绍了vue.js实现的全选与全不选功能,结合实例形式分析了vue.js基于elementui实现全选与全不选功能的相关页面渲染、初始化数据及功能函数等相关操作技巧,需要的朋友可以参考下
vue checkbox 全选 数据的绑定及获取和计算方法
12-29
<input type='checkbox' v-model='checkboxModel' :value='z.coach_id+-+z.amount' :i=dianji @click=lll>...全选</span></span> 第二个 定义 return { dianji:'12', list: [], value:{}, value1:
vue循环生成的el-checkbox的控件双向绑定失效问题(选中、取消失效)
风中追风
09-23 5985
做到这里后，以为实现了功能，看效果发现问题: 点击时候，el-checkbox没有勾上，也没变化，但是checked的数值确实是变化了，但视图没有变化，那就说明：这样给值的checked没有和组件双向绑定上！！！
vue项目中radio/checkbox无法选择的问题
theScoreONE的博客
01-24 3093
之前写过一遍《vue通过后端返回值动态生成表单及动态表单的数据提交 》提交动态表单数据没有问题。但是要更新数据，请求后端数据渲染表单并赋值后，发现radio/checkbox等组件无法手动选中，排查知道原因是双向绑定失效 一、复现问题 1、正常的情况 <van-checkbox-group v-model="result" :max="2"> <van-checkbox name="a">复选框 a</van-checkbox> <van-checkbo
vue与element ui的el-checkbox的坑el-checkbox不能选中或者选中不能取消
热门推荐
jerryyang_2017的博客
06-17 2万+
一，场景 通过使用checkbox，实现如图的场景， 点击某个tag，实现选中和非选中状态。 二， 官网的例子 通过切换checked值为true或者false来实现，一个checkbox的状态切换 <template> <!-- `checked` 为 true 或 false --> <el-checkbox v-model="checked">备选项</el-checkbox> </template> <scr
在vue项目中checkbox，写点击事件不能选中或者取消选中。（原因分析）
Yetian_2000的博客
10-09 6249
1.checkbox，写点击事件不能选中或者取消选中：1.因为investorStateList是个数组，不是一个简单数据类型，vue不能监听到变化，并且改变视图，所以需要使用强制更新视图 .2.或者checked绑定简单的数据类型也可以。 ...
vue项目中使用iframe标签引入外部html,并进行数据交互!
qq_43627981的博客
10-23 6204
首先是vue中引入iframe的src怎么引用路径的坑! 首先我们需要把静态的html文件和css,js文件放在public目录下. 在iframe标签中引用的时候不要使用public/下的什么,这是不对的.去掉public,直接引用即可.(还是打包后发现放在public文件下的文件都会放在根目录,并没有public这个目录) 下面就介绍一下怎么交互的问题. vue文件里的写法: ...
vue购物车全选全不选
最新发布
06-09
在Vue中实现购物车的全选和全不选，一般需要以下步骤： 1. 在购物车列表中，为每个商品项添加一个选中状态的属性，例如isChecked。 2. 添加全选和全不选的按钮，绑定对应的事件处理函数。 3. 在事件处理函数中，改变购物车列表中每个商品项的isChecked属性，实现全选或全不选功能。 示例代码： ``` <template> <div> <div v-for="(item, index) in cartList" :key="index"> <input type="checkbox" v-model="item.isChecked"> {{ item.name }} - {{ item.price }} </div> <button @click="selectAll">全选</button> <button @click="unselectAll">全不选</button> </div> </template> <script> export default { data() { return { cartList: [ { name: "商品1", price: 10, isChecked: false }, { name: "商品2", price: 20, isChecked: false }, { name: "商品3", price: 30, isChecked: false } ] }; }, methods: { selectAll() { this.cartList.forEach(item => { item.isChecked = true; }); }, unselectAll() { this.cartList.forEach(item => { item.isChecked = false; }); } } }; </script> ``` 在模板中，使用v-model指令绑定每个商品项的isChecked属性，实现复选框的选中和取消选中。在事件处理函数中，使用forEach()方法遍历购物车列表，改变每个商品项的isChecked属性，实现全选或全不选功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值