uview 复选框,选中其中一个,另外一个被选中的变为未选中转态

img

img

img

img


选中香蕉的时候,苹果不选中,如何操作呢,用的uview复选框。没有用单选框,因为单选框不能取消选中状态

那你这 就不叫 复选框了 。 在change事件里 处理一下 呗 。 你要的效果 也就是 只能选中一个 。 你在change里 选中的值赋值前 先 清空选中的值 再赋值

单选框设置为空就是取消选中状态,


<template>
  <view class="content">
    <u-radio-group v-model="radioGroupValue"  placement="column" @change="groupChange">
      <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index" :label="item.name"
        :name="item.name" @change="radioChange">
      </u-radio>
    </u-radio-group>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 基本案列数据
        radiolist: [{
            name: '苹果',
            disabled: false
          },
          {
            name: '香蕉',
            disabled: false
          },
          {
            name: '橙子',
            disabled: false
          }, {
            name: '榴莲',
            disabled: false
          }
        ],
       radioGroupValue: '',//当前 radioGroup 选中的值
       radioValue:'', // 当前 radio 的值
       num: 0 //用于区分是否是重复选中
      }
    },
    onLoad() {

    },
    methods: {
      groupChange(n) {
        if(n == this.radioValue && this.num == 0){
          // 第一次相等即执行以下代码
          this.num++
        }else {
          // 第一次后相等即执行以下代码
          // 置空 radioGroupValue 即取消选中的值
           this.radioGroupValue = ''
           // 初始化 num
           this.num = 0
        }
      },
      // 当切换其他选项的时候此方法才会执行
      radioChange(n) {
        this.radioValue = n
        // 切换选项后需要初始化 num
        this.num = 0
      }
    }
  }
</script>