微信小程序按钮选中（单选，多选）

微信小程序按钮选中（单选，多选）

<view wx:for="{
     {testList}}" wx:key="{
     {item}}" class="operationButton">
        <button data-value="{
     {item}}" 
	        class="{
     {index==clickindex[index]?'clickbutton':'clickbutton2'}}" 
	        data-index="{
     {index}}" 
	        catchtap="catchButton">{
     {
     item}}
        </button>
</view>

1：单选

// js部分

var clickindex = new Array();

catchButton:function(e){
     
    // console.log(e);
    // console.log(clickindex[index])
    var index = e.currentTarget.dataset.index;
    var value = e.currentTarget.dataset.value;

    clickindex[index] = index

    this.setData({
     
      clickindex: clickindex
    })
 }

//css 部分

.clickbutton{
     
  background:#2d8cf0;
  color:white;
}
.clickbutton2{
     
  color: #888888;
} 

2：多选

catchButton:function(e){
     
    // console.log(e);
    // console.log(clickindex[index])
    var index = e.currentTarget.dataset.index;
    var value = e.currentTarget.dataset.value;
    if (clickindex[index]==undefined){
     
      //点击选中
      operationList.push(value);
      clickindex[index] = index
    }else{
     
      //取消选中
      for (var i = 0; i < operationList.length;i++){
     
        if (operationList[i]==value){
     
          operationList.splice(i,1);
        }
      }
      clickindex[index] = undefined
    }
    this.setData({
     
      clickindex: clickindex
    })
    //上传到数据库的值
    console.log("选中的值为");
    console.log(operationList);
      
  },

//css 部分

.clickbutton{
     
  background:#2d8cf0;
  color:white;
}
.clickbutton2{
     
  color: #888888;
}