vue实现单选多选反选全选全不选

刘福发布于2019-08-23 11:50 / 1321人阅读

摘要：多选如果已经选中了，那就取消选中，如果没有，则选中接下来我们写一下全选，全取消，反选的实现。

单选

当我们用v-for渲染一组数据的时候，我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选

{{item}}

首选定义一个selectedNum,当我们点击item时，便把这个selectedNum更改为我们所点击的item的index，然后每个item上加入判断selectedNum是不是等于自己，如果等于则选中。
相当于每个人有一个编号，鼠标点击生成了一个中奖号码，然后每个人自己去判断这个中奖号码是不是自己，如果是自己，哇，不得了~

代码如下：

data() {
    return {
      selectedNum:"",
      radioList: ["某个元素", "某个元素", "某个元素", "某个元素", "某个元素"],
    };
  },
methods: {
    //单选
    select(i) {
      this.selectedNum = i;
    },
  }

多选

多选的原理和单选一样，只不过这次我们要维护的是一个数组，不是单个的selectedNum

{{item}}

同样是利用index~同样是选中奖的人，不过这次中奖的人很多，我们点击一次就有一个人中奖，如果这个人的index出现在我们的中奖名单checkbox上，那他就是天选之人了~
写成代码就是点击一次push一次index到checkbox中，如果这个checkbox中有这个index了那就不要它了，实现了点一次选中再点一次取消。

//多选
    check(i){
      var idx = this.checkbox.indexOf(i);
      //如果已经选中了，那就取消选中，如果没有，则选中
      if(idx>-1){
        this.checkbox.splice(idx,1);
      }else{
        this.checkbox.push(i);
      }
    },

接下来我们写一下全选，全取消，反选的实现。

//选中全部
checkAll(){
    //中奖的人就这么多，而且他们的index都是0到length-1的（v-for渲染），一顿数组基本操作即可
    var len = this.checkboxList.length;
    this.checkbox = [];
    for(var i=0;i-1){
        this.checkbox.splice(idx,1);
      }else{
        this.checkbox.push(i);
      }
    }
  }

很多时候全选和全部取消只要一个按钮实现，这样我们就需要来判断它是不是已经全部选满了。在computed中自动计算是否全选。



computed: {
    //判断是否全部选中
    isCheckAll(){
      if(this.checkbox.length==this.checkboxList.length){
        return true;
      }
      return false;
    }
  },

然后我们只需要给这个双功能按钮绑定一个这样的功能即可

letsGetThisFuckingCheck(){
//如果全选，就是清空选择；如果不是，那就全都安排一下
      if(this.isCheckAll){
        this.clearCheckbox();
      }else{
        this.checkAll()
      }
    },

展示

上gif演示图（假装这个是gif，其实你们能想象的出来什么效果的吧）

完整代码

GPU云服务器云服务器全选全不选全选反选 input全选反选 jquery全选反选

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97548.html

表格增删改---排序 ---全选全不选反选-----金山前端面试题

摘要：代码部分全选操作编辑删除姓名年龄性别爱好保存新增部分姓名年龄性别爱好小花小军小坤小新您确定要保存修改吗感兴趣的，可以给颗小心心或者一个大拇指代码： HTML部分 .warp{ width: 900px; padding: 20px; margin: 0 auto; } .gr...

AbnerMing 2019-08-29 16:07 评论0 收藏0
jQuery实现全选、反选和不选功能

摘要：当勾选全选按钮旁边的复选框时，列表中的选项全部选中，反之取消勾选则列表中的选项全部为未选中状态。全选或全不选全选全不选反选设置全选复选框获取选中选项的值选项总个数全选不全选HTML 我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一排操作按钮。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1.时间都去哪儿了 ...

番茄西红柿 2019-04-23 11:43 评论0 收藏0
checkbox jquery 全选反选

摘要：原始实现全选全不选全选项项项项改进全选只能在里面声明，因为，才会变化原始 jQuery实现CheckBox全选、全不选 $(function() { $(#checkAll).click(function() { $(input[name=subBox]).attr(checked,this.checked); }); ...

SunZhaopeng 2019-08-22 14:53 评论0 收藏0
Jquery实现checkbox全选、取消全选和反选

摘要：最近在看廖雪峰的教程，事件篇的练习题比较综合，研究了很久终于研究出来了，现在分享出来，提供给小白学习。题目如下首先要获取到全选和每一项的，然后通过逻辑代码实现题目要求。最近在看廖雪峰的Jquery教程，事件篇的练习题比较综合，研究了很久终于研究出来了，现在分享出来，提供给小白学习。题目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...

wenzi 2019-08-22 15:56 评论0 收藏0
Jquery实现checkbox全选、取消全选和反选

摘要：最近在看廖雪峰的教程，事件篇的练习题比较综合，研究了很久终于研究出来了，现在分享出来，提供给小白学习。题目如下首先要获取到全选和每一项的，然后通过逻辑代码实现题目要求。最近在看廖雪峰的Jquery教程，事件篇的练习题比较综合，研究了很久终于研究出来了，现在分享出来，提供给小白学习。题目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...

高璐 2019-08-02 10:04 评论0 收藏0