小程序中的单选按钮逻辑与复选按钮

单选按钮逻辑

//js
radioChange: function (e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value);

    var radioItems = this.data.radioItems;
    for (var i = 0, len = radioItems.length; i < len; ++i) {
      radioItems[i].checked = radioItems[i].value== e.detail.value;
    }

    this.setData({
      radioItems: radioItems
    });
  },

//xml
 <view class="weui-cells__title">单选列表项</view>
        <view class="weui-cells weui-cells_after-title">
            <radio-group bindchange="radioChange">
                <label class="weui-cell weui-check__label" wx:for="{{radioItems}}" wx:key="value">
                    <radio class="weui-check" value="{{item.name}}" checked="{{item.checked}}"/>

                    <view class="weui-cell__bd">{{item.value}}</view>
                    <view class="weui-cell__ft weui-cell__ft_in-radio" wx:if="{{item.checked}}">
                        <icon class="weui-icon-radio" type="success_no_circle" size="16"></icon>
                    </view>
                </label>
            </radio-group>

单选框的逻辑比较简单，把所有的元素遍历出来，等到点击单选按钮的时候，当value值与遍历变量值一致的时候就 把checked 设置为true，其他的时候把checked设置为 false 只需要一次循环

checkboxChange: function (e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value);

    var checkboxItems = this.data.checkboxItems, values = e.detail.value;
    for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
      checkboxItems[i].checked = false;

      for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (checkboxItems[i].value == values[j]) {
          checkboxItems[i].checked = true;
          break;
        }
      }
    }

    this.setData({
      checkboxItems: checkboxItems
    });
  },

 <view class="weui-cells__title">复选列表项</view>
        <view class="weui-cells weui-cells_after-title">
            <checkbox-group bindchange="checkboxChange">
                <label class="weui-cell weui-check__label" wx:for="{{checkboxItems}}" wx:key="value">
                    <checkbox class="weui-check" value="{{item.value}}" checked="{{item.checked}}"/>

                    <view class="weui-cell__hd weui-check__hd_in-checkbox">
                        <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
                        <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{item.checked}}"></icon>
                    </view>
                    <view class="weui-cell__bd">{{item.name}}</view>
                </label>
            </checkbox-group>

复选框的逻辑，也不复杂，当只有一个被选中的选项的时候，当点击已经选择的选项的时候，首选外层循环设置为false，这个时候 e.detail.value为零，所以无法进入内层循环，所以被取消。

当选中未选择的选项的时候，则从第一个选项开始遍历，如果value值与外层相同则设置为TRUE。然后跳出内层，继续遍历，

当有两个选中的选项的时候，点击已经选择的按钮，values值会减少l，所以最后一次的外层循环无法进入内层，所有取消该选项。