微信小程序学习 radio如何取消选择，多个radio选择其中一个

微信小程序学习 radio如何取消选择，多个radio选择其中一个

微信小程序入门学习阶段，在使用radio的时候遇到挺多困难，所以想记录下，方便以后复习。

radio怎么取消选择

先模仿官方文档，标签radio-group

 <radio-group bindchange="check" class="check">
    <radio value="{{288}}"  checked="{{check}}">radio>
  radio-group>

check(e){
  this.setData({
    check:!this.data.check
  });
},

但是这样是实现不了的，因为bindchange只能触发一次

1. 方案1 把标签改为view，js内容不变

    <view bindtap="check" class="check">
    <radio value="{{288}}"  checked="{{check}}">radio>
    view>

2. 方案2 把标签改为label，js内容不变

    <label catchtap="check" class="check">
    <radio value="{{288}}"  checked="{{check}}">radio>
    label>

多个radio,想实现选中一个，其他的选中自动消失

如代码所示，我创建了三个radio标签

    <radio-group bindchange="check0" class="check">
    	<radio value="{{288}}"  checked="{{checked[0]}}">radio>
    radio-group>
    
    <radio-group bindchange="check1" class="check">
   		<radio value="{{388}}" checked="{{checked[1]}}">radio>
    radio-group>
    
    <radio-group bindchange="check2" class="check">
    	<radio value="{{588}}" checked="{{checked[2]}}" >radio>
    radio-group>

然后分别对应三个函数就可以了

把当前触发的设置为true，其他都是false

//初始化全部为false
data: {
    checked:[false,false,false],
  },



check0(e){
  let newChecked=this.data.checked
  newChecked[0]=true
  newChecked[1]=false
  newChecked[2]=false
  this.setData({
    price:Number(e.detail.value),
    checked:newChecked
  });
},
check1(e){
  let newChecked=this.data.checked
  newChecked[0]=false
  newChecked[1]=true
  newChecked[2]=false
  this.setData({
    price:Number(e.detail.value),
    checked:newChecked
  });
},
check2(e){
  let newChecked=this.data.checked
  newChecked[0]=false
  newChecked[1]=false
  newChecked[2]=true
  this.setData({
    price:Number(e.detail.value),
    checked:newChecked
  });
},

这样就完成了，但是可以让代码更精简一下，不需要写三个函数，一个函数就可以了，通过我传进来的value值去控制checked

check(e){
  let newChecked=this.data.checked
  let value=e.detail.value
  if(value==288){
    newChecked[0]=true
    newChecked[1]=false
    newChecked[2]=false
  }
  else if(value==388){
    newChecked[0]=false
    newChecked[1]=true
    newChecked[2]=false
  }
  else{
    newChecked[0]=false
    newChecked[1]=false
    newChecked[2]=true
  }
  this.setData({
    price:Number(e.detail.value),
    checked:newChecked
  });
},

收获 || 注意点

1. 在setData里面是不能设置数组里的某个元素的，所以我需要在外面自己定义一个数组。最后修改的是整个数组

2. radio标签里的checked属性

   这样是选中的状态

   这样没有选中的状态

   这样是没有选中的状态

​

注意此时data里的check必须是true或false，不能是字符串的“true”或“false”