微信小程序之radio单项选择器

radio单项选择器是与CheckBox多项选择器对立的一个组件,它每次只能选中一个,选项间是一种互斥关系。它的属性如下

属性名 类型 默认值 说明
value String <radio/> 标识。当该<radio/> 选中时,<radio-group/> 的 change 事件会携带<radio/>的value
checked Boolean false 当前是否选中
disabled Boolean false 是否禁用
color Color radio的颜色,同css的color

radio-group是用来容纳多个radio单项选择器的容器,它有一个绑定事件bindchange,<radio-group/> 中的选中项发生变化时触发 change 事件,event.detail = {value: 选中项radio的value}

下面举个栗子

在wxml文件中使用radio单项选择器进行界面布局

<radio-group bindchange="radiochange">
  <radio value='footerball'>足球</radio>
<radio value='basketball' checked>篮球</radio>
<radio value='baseball' disabled>棒球</radio>
<radio value='pingpang'>乒乓球</radio>
</radio-group>

在js里,添加radioChange事件函数,获取单项选中的值,将其打印出来

 radiochange:function(e){
    console.log('radio发生change事件,携带的value值为:',e.detail.value)
  }

被禁用的单选框是不能进行使用的,radio-group上面绑定的bindchange事件,每次勾选时,只能使一个选项呈现选中状态,同时将相应的值存在detail里

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容