小程序单选和多选

记录一下：小程序的单选和多选

废话不多说，上代码~

wxml

<view class="content">
  <view class="title">多选</view>
  <view class="item">
    <view class="{{item.active}}" wx:for="{{list}}" wx:key="index" wx:for-item="item" bindtap="bindList" data-id="{{item.id}}">{{item.name}}</view>
  </view>
</view>

<view class="content">
  <view class="title">单选</view>
  <view class="item">
    <view class="{{item.active?'active':''}}" wx:for="{{type}}" wx:key="index" wx:for-item="item" bindtap="bindActive" data-id="{{item.id}}">{{item.name}}</view>
  </view>
</view>

wxss

.content{
  margin-bottom: 50rpx;
}
.title{
  font-size: 40rpx;
  font-weight: bold;
}
.item > view{
  color: #666666;
  font-size: 24.8rpx;
  background: #EEEEEE;
  padding: 11rpx 27rpx;
  border-radius: 24rpx;
  margin-top: 16rpx;
  margin-right: 16rpx;
  cursor: pointer;
}
.item .active{
  color:#ffffff;
  background-color: #1D80F5;
} 

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[{"id":"452113a3","name":"肥肥","active":''},
    	{"id":"a1b931a0","name":"滚滚","active":''},
    	{"id":"115af7f9","name":"圆圆","active":''},
    	{"id":"60fe875c","name":"胖胖","active":''},
      {"id":"8f100654","name":"嘟嘟","active":''}],
    type:[
        { id:'sgyl',name:'单选11111',active:false},     
        { id:'js',name:'单选22222',active:false},
        { id:'shjjfz',name:'单选33333',active:false},
        { id:'sbhqs',name:'单选4444',active:false},
        { id:'ldmf',name:'单选5555',active:false},
        { id:'xfgw',name:'单选66666',active:false}
    ]
  },

  //单选
  bindActive(e){
    let arr = this.data.type.map(item=>{
      if(item.id===e.currentTarget.dataset.id){
        item.active=!item.active
      }else{
        item.active=false
      }
      return item
    })    
    this.setData({type:arr});
    this.getPeopleInfo();
  },

//多选
  bindList(e){
    let index=e.currentTarget.dataset.id;
    let arr=this.data.list.map(item=>{      
      if(item.id == index && item.active == ""){
        item.active="active";
      }else if(item.id == index){
        item.active="";
      } 
      return item
    })       
    this.setData({list:arr});
    this.getPeopleInfo();
  },

//获取id
  getPeopleInfo(){
    let ids=this.data.list.filter( item=> item.active == 'active').map(item => item.id);
    let dx=this.data.type.filter(item => item.active == true).map(item=>item.id);
    console.log('多选Id：'+ids)
    console.log('单选Id：'+dx);
  }
})

示例图