vue實現單選多選反選全選全不選

劉福發布于2019-08-23 11:50 / 1341人閱讀

摘要：多選如果已經選中了，那就取消選中，如果沒有，則選中接下來我們寫一下全選，全取消，反選的實現。

單選

當我們用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全選反選

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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