微信小程序自定义单选框样式实现单选功能

// index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
        img: "../../image/car.png",
        name: "小车",
        type: "C1/C2/C3",
        checked: true,
      },
      {
        img: "../../image/trucks.png",
        name: "货车",
        type: "A2/B2",
        checked: false,
      },
      {
        img: "../../image/passenger-car.png",
        name: "客车",
        type: "A1/A3/B1",
        checked: false,
      },
      {
        img: "../../image/motorbike.png",
        name: "摩托车",
        type: "D/E/F",
        checked: false,
      }
    ],
  },

  // 选择
  choose: function (e) {

    let index = e.currentTarget.dataset.id;
    let list = this.data.list;
    for (let i = 0; i < list.length; i++) {
      this.data.list[i].checked = false;
    }
    if (list[index].checked) {
      this.data.list[index].checked = false;
    } else {
      this.data.list[index].checked = true;
    }
    this.setData({
      list: this.data.list
    })
  },

})

<!-- wxml -->
  <view class="chooseType" >

    <view class=" {{item.checked?'chooseType-content-select':'chooseType-content'}}'" wx:for="{{list}}" wx:key="index" data-id="{{index}}" bindtap="choose">
      <image class="chooseType-content-img" src="{{item.img}}"></image>
      <view>{{item.name}}</view>
      <view class="chooseType-content-type">{{item.type}}</view>
    </view>

 </view>

 /* wxss */
.chooseType {
  width: 100%;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: rgb(197, 196, 187) 1rpx solid;
  font-size: 30rpx;
  background: #FFFFFF;
}

.chooseType-content-img{
  width: 90rpx;
  height: 90rpx;
}


.chooseType-content{
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.chooseType-content-select{
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: rgb(163, 162, 162,0.2);
}

.chooseType-content-type{
  margin-top: 10rpx;
  font-size: 30rpx;
  color: #b3b0b0;
}