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里