循环列表点击单选框，以及反选功能

在小程序的循环列表中，点击某条目，该条目下面的单选框被选中，以及高亮，再点击或者点击其他条目，单选框取消选中。

 

xml代码

<view class="titWrapper">

</view>
<block>
  <view  wx:for="{{listData}}" class="item_wrapper class='{{idx == currentidx&& choose==true ? 'item_cur':''}}'"  wx:for-index="idx" wx:for-item="{{item}}" wx:key="key" bindtap="clickItem" data-index="{{idx}}">
    <view class="left_con" >
      <view class="left_tp">
        <text class="type cur1">类别</text>
        <text class="card">8933 **** 5838 </text>
      </view>
      <view class="left_bt">
      <text>姓名：</text><text>xxxxx7</text>
      </view>
    </view>
    <view class="right_con">
    <radio checked='{{idx == currentidx&& choose==true? true : false}}' value="1" class="radio"></radio>
    </view>
  </view>
</block>

js代码

 data: {
    listData: [1, 2, 3],
    choose: false,
    currentidx: 0,
    selectIdx2: 0,
  },

clickItem: function(e) {
    console.log(e);
    //记录上次点击的对象的index
    var oldidx = this.data.currentidx;
    //记录当前点击的对象的index
    var currentidx = e.currentTarget.dataset.index;
    if (oldidx == currentidx) {
      var choose = this.data.choose;
      this.setData({
        currentidx: currentidx,
        choose: !choose
      })
    } else {
      this.setData({
        currentidx: currentidx,
        choose: true
      });
    }
    console.log(oldidx + "---------" + this.data.currentidx);


  },

参考大神链接：https://blog.csdn.net/anLazyAnt/article/details/72471180?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task