[移动开发]微信小程序 实现标签多选框

Html

<input wx:for="{`在这里插入代码片`{taglist}}" wx:for-item="item" wx:key="index" name="tag" value="{{item.name}}" disabled="true"
	bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}" 
	checked="{{item.isSelected}}" class="{{item.isSelected ? '_on' : ''}}" />

css

 input{
    width: 30%;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    margin: 0 10rpx;
    margin-top: 20rpx;
    border: 1rpx solid #EFF2F8;
    border-radius: 100rpx;
    background-color: rgb(238, 238, 238);
  }
  ._on {
    color: #ab0a3d;
    border: 1rpx solid #ab0a3d;
  }

js

    data: {
        taglist: [{
            value: '五险一金',
            name: '五险一金',
            isSelected: false,
          },
          {
            value: '包吃包住',
            name: '包吃包住',
            isSelected: false,
          },
          {
            value: '朝九晚五',
            name: '朝九晚五',
            isSelected: false,
          },
        ]
    },
    
    checkboxChange: function (e) {
        console.log('tab e:',e);
        let string = "taglist["+e.target.dataset.index+"].isSelected"
        this.setData({
            [string]: !this.data.taglist[e.target.dataset.index].isSelected
        })
        let detailValue = this.data.taglist.filter(it => it.isSelected).map(it => it.value)
        console.log('所有选中的值为：', detailValue)
        console.log(detailValue.join(","))
    }