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

Posted 2023-03-29 Aure219

微信小程序学习 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属性

   <radio value="288" checked="false"></radio> 这样是选中的状态

   <radio value="288" checked=""></radio> 这样没有选中的状态

   <radio value="288" checked="false"></radio> 这样是没有选中的状态

​ <radio value="288" checked="check"></radio>

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