小程序全选多个单选按钮

index.wxml

<radio value="0" checked="{{allchecked}}" bindtap="selectAll" color="#d81e06" />全选商品列表
<view class="car-list" wx:for="{{car_list}}" wx:key="index" wx:for-item="item">
  <radio checked="{{item.selected}}" bindtap="selectList" data-index="{{index}}" color="#d81e06" />{{item.title}}
</view>

index.wxss

page{
  font-size: 18px;
}

index.js

Page({
  data: {
    car_list: [
      {'selected':true,'title':'手机'},
      {'selected':true,'title':'电脑'},
      {'selected':true,'title':'汽车'},
    ],
    allchecked: false,
  }, 

  // 全选事件
  selectAll(e) {
    // 是否全选状态
    var selectAllStatus = this.data.allchecked;
    selectAllStatus = !selectAllStatus;
    var dataList = this.data.car_list;
    for (let i = 0; i < dataList.length; i++) {
      // 改变所有商品状态
      dataList[i].selected = selectAllStatus;
    }
    this.setData({
      allchecked: selectAllStatus,
      car_list: dataList,
    });
  },

  // 选择事件
  selectList(e) {
    // 获取data- 传进来的index
    let index = e.currentTarget.dataset.index;
    // 获取购物车列表
    let dataArr = this.data.car_list;
    // 获取当前商品的选中状态
    let selected = dataArr[index].selected;
    // 改变状态
    dataArr[index].selected = !selected;
    this.setData({
      car_list: dataArr
    });

    // 改变全选状态
    for (var i = 0; i < this.data.car_list.length; i++) {
      // 当状态为全选时，每个元素其中有一个为false，则取消全选
      // 当状态为非全选时，每个元素都为true，则全选
      if (this.data.allchecked) {
        if (!this.data.car_list[i].selected) {
          this.setData({
            allchecked: false
          });
          break;
        }
      } else {
        if (this.data.car_list[i].selected) {
          this.setData({
            allchecked: true
          });
        } else {
          this.setData({
            allchecked: false
          });
          break;
        }
      }
    }
  },
})