uniapp radio组件 再次点击 取消单选框选中

uniapp中修改radio的样式

• 解决方法(在App.vue文件中写样式（只能在App.vue中写，否则就没有效果）)

	<!-- 或者直接使用图片切换的方式，用div来模拟radio。 -->

		<!-- 当该 <radio> 选中时，<radio-group> 的 change 事件会携带 <radio> 的 value -->
		<!-- 打勾 -->
		<view class="w-100 dagou d-flex a-center mgt-32 ">
			<radio-group @change="radioChange" class="radio-group-wrap">
				<!-- :checked= = true 默认为选中  -->
				 <!-- :checked="false" 默认为不选中 -->
				 <!-- 但是都不影响 点击之后 变为 打钩 -->
				<view class="dagou-left"><radio value="agreementSelected" :checked="agreementChecked" @click="radioClick"></radio></view>
				<view class="mgl-16 dagou-right">
					我已阅读并同意
					<text class="agreement">《智慧云坊用户服务协议》</text>
				</view>
			</radio-group>
		</view>

第一个方法：是拿到你选中的value

第二个方法：是取消选中

methods: {
		radioChange(e) {
			console.log(e.detail);
			//  错误写法：
			// this.agreementChecked != this.agreementChecked;
			//取反：
			this.agreementChecked = !this.agreementChecked;
			
		},
		radioClick(){
			console.log('~~~点击radio~~')
			// this.agreementChecked = false
			// this.agreementChecked = !this.agreementChecked;
		}
	}

ps:取反的写法

//  错误写法：
			// this.agreementChecked != this.agreementChecked;
			//取反正确写法：
			 this.agreementChecked = !this.agreementChecked;

尝试用单选款实现多选失败 :只是实现了多个中选择一个 但是不能取消选中

<view class="circle-list-arr d-flex a-center " v-else :key="index" v-for="(value,index) in avocationDetail">
				<view class="circle-list-son ">
					<view class="w-686 mgr-32 d-flex a-center j-sb containnerBox ">
						<text>{{value.title}}</text>
						<!-- 单选框 -->
						<radio-group @change="radioChange" class="radio-group-wrap">	
									<!-- 只是实现了多个中选择一个  不能取消选中 -->
							<!-- 	<radio :value="value.id" :checked="currentId == value.id" @click="radioClick(value.id)"></radio>		 -->
								<radio :value="value.id" :checked="currentId == value.id" @click="radioClick(value.id)"></radio>		
						</radio-group>
					</view>
				
				
				</view>
				
			</view>

js

//data:
	currentId:'',

//methods:
//单选
		radioChange(e) {
			console.log('选中单选框的值:',e.detail);
		},
		radioClick(id){
			console.log('~~~点击radio~~')
			// this.agreementChecked = false
			
			// this.agreementChecked = !this.agreementChecked;
			this.currentId = id
			
		},

实现多选：

<!-- 多选 -->
			<view class="uni-list">
				<checkbox-group @change="checkboxChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="item in avocationDetail" :key="item.id">
						<view>{{ item.title }}</view>
						<view>
							<checkbox :value="item.id" :checked="item.checked" />
							<!-- <checkbox :value="item.value" :checked="false" /> -->
						</view>
					</label>
				</checkbox-group>
			</view>

js

//选中数组集合
	activeGather: [],
    
    //接口数据
	avocationDetail: []

	//复选  checked: false 在点击其他的框 会加上 checked属性
		checkboxChange: function(e) {
			// var items = this.items,
			var items = this.avocationDetail,
				values = e.detail.value;
			//集合
			console.log(values); //["CHN", "BRA", "JPN"]
			console.log(items);

			this.activeGather = values;

			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i];
				// includes() 方法用于判断字符串是否包含指定的子字符串。
				// 如果找到匹配的字符串则返回 true，否则返回 false。
				if (values.includes(item.value)) {
					// Vue.set(object, key, value)
					//添加属性
					this.$set(item, 'checked', true);
				} else {
					this.$set(item, 'checked', false);
				}
			}

			
		}

bug 把checked = “false”

<!-- 第一次点击没有选中 因为后台数据中一开始 都没 checked这个属性  -->
<!-- <checkbox :value="item.id" :checked="item.checked" /> -->
<checkbox :value="item.id" :checked="false" />