微信小程序實現複選框效果

這篇文章主要爲大家詳細介紹了微信小程序實現複選框效果，具有一定的參考價值，感興趣的小夥伴們可以參考一下

本文實例爲大家分享了微信小程序實現複選框片展示的具體代碼，供大家參考，具體內容如下

樣式部分你們自由發揮，反正這裏是什麼都沒寫的，選中和沒選中直接用這個this.data.arrStatus[checkIndex]去判斷就行了，之後你們都懂的。

效果預覽：

js部分

// page/index/index.js
Page({
 /**
  * 頁面的初始數據
  */
 data: {
  items: [
   { name: 'USA', value: '美國' },
   { name: 'CHN', value: '中國' },
   { name: 'BRA', value: '巴西' },
   { name: 'JPN', value: '日本' },
   { name: 'ENG', value: '英國' },
   { name: 'TUR', value: '法國' },
  ],
  arr: [],
  arrStatus: []
 },

 check: function (e) {
  //獲取當前選中的值
  var checkValue = e.currentTarget.dataset.val;
  //獲取當前選中的下標
  var checkIndex = e.currentTarget.dataset.index;
  //當前選中的取反值
  this.data.arrStatus[checkIndex] = !this.data.arrStatus[checkIndex];
  if (this.data.arrStatus[checkIndex]) {
   //如果當前爲選中狀態則將值插入進數組中
   this.data.arr.push(checkValue);
  }else{
   //如果當前爲未選中狀態則將值從數組中刪除並返回一個新的數組
   for (var i in this.data.arr) {
    if (this.data.arr[i] == checkValue) {
     this.data.arr.splice(i);
    }
   }
  }
  //打印當前所選中的數據
  console.log(this.data.arr);
 },

 /**
  * 生命週期函數--監聽頁面加載
  */
 onLoad: function (options) {
  //設置數組中每一個數據的狀態
  for (var i in this.data.items) {
   this.data.arrStatus[i] = false;
  }
 },
})

wxml部分：

<block wx:for='{{ items }}'>
  <text data-index='{{ index }}' data-val='{{ item.value }}' catchtap='check'>{{ item.value }}</text>
</block>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。