小程序 单选 与 多选 示例

单 选 :

<view class="{{rubbishindex == index?‘err active‘:‘err‘}}" wx:for="{{rubbishlist}}" data-type="{{item}}" data-index="{{index}}" wx:key="index" bindtap="addrubbish">{{item}}</view>

data: {
rubbishlist:[‘厨余垃圾‘,‘可回收垃圾‘,‘有害垃圾‘,‘其他垃圾‘,‘其他垃圾‘,‘其他垃圾‘,],
rubbishindex:2,
}

addrubbish:function(e){
var that = this;
var index = e.currentTarget.dataset.index;
that.setData({
rubbishindex:index
})
},

发送参数:
box: that.data.rubbishlist[that.data.rubbishindex] //有害垃圾

 

多选:

boxnum:0,

riderCommentList: [{
      value: ‘厨余垃圾‘,
      selected: false ,
      title: ‘厨余垃圾‘
    },{
      value: ‘可回收垃圾‘,
      selected: false ,
      title: ‘可回收垃圾‘
    },{
      value: ‘有害垃圾‘,
      selected: false ,
      title: ‘有害垃圾‘
    },{
      value: ‘其他垃圾‘,
      selected: false ,
      title: ‘其他垃圾‘
    },{
      value: ‘厨余垃圾‘,
      selected: false ,
      title: ‘厨余垃圾‘
    },{
      value: ‘可回收垃圾‘,
      selected: false ,
      title: ‘可回收垃圾‘
    }]
 
    
<view class="{{item.selected ? ‘err active‘ : ‘err‘}}" wx:for="{{riderCommentList}}" wx:for-item="item" wx:key="item.index"  bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}" >{{item.title}}</view>
 
  checkboxChange(e){
    var that = this;
    console.log(‘checkboxChange e:‘,e);
    let string = "riderCommentList["+e.target.dataset.index+"].selected"
        this.setData({
            [string]: !this.data.riderCommentList[e.target.dataset.index].selected
        })
        let detailValue = this.data.riderCommentList.filter(it => it.selected).map(it => it.value)
        console.log(‘所有选中的值为:‘, detailValue)
        console.log(‘个数为‘, detailValue.length)
        that.setData({
          boxnum:detailValue.length
        })
  },

 

//例如,在一个Array中,删掉偶数,只保留奇数,可以这么写:

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
 });
r; // [1, 5, 9, 15]


//把一个Array中的空字符串删掉,可以这么写: var arr = [‘A‘, ‘‘, ‘B‘, null, undefined, ‘C‘, ‘ ‘]; var r = arr.filter(function (s) { return s && s.trim(); // 注意:IE9以下的版本没有trim()方法 }); r; // [‘A‘, ‘B‘, ‘C‘]

 

小程序 单选 与 多选 示例

上一篇:微信小程序-数据交互


下一篇:小程序三级联动,实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表