radio

基础库 1.0.0 开始支持，低版本需做兼容处理。

单选项目。

属性类型默认值必填说明最低版本valuestring 否<radio> 标识。当该<radio> 选中时，<radio-group> 的 change 事件会携带<radio>的value1.0.0checkedbooleanfalse否当前是否选中1.0.0disabledbooleanfalse否是否禁用1.0.0colorstring#09BB07否radio的颜色，同css的color1.0.0

示例代码

在开发者工具中预览效果

//单选按钮 <radio class='radioOne' checked="{{ischeck}}" color="#DE5245" bindtap='radioClick'> 点击我 </radio> Page({ data: { items: [ ischeck:true ] }, radioClick: function(e){ let chageFlag = !this.data.ischeck; this.setData({ ischeck: chageFlag }); console.log(e, chageFlag); } })

 

 

radio-group

基础库 1.0.0 开始支持，低版本需做兼容处理。

单项选择器，内部由多个 <radio> 组成。

属性类型默认值必填说明最低版本bindchangeEventHandle 否<checkbox-group>中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]} Page({ data: { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'}, ] }, radioChange(e) { console.log('radio发生change事件，携带value值为：', e.detail.value) } })

多项选择时可使用(checked不设置，则默认为都不选中)

<radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}"> <radio value="{{item.name}}" checked="{{item.checked}}" /> {{item.value}} </label> </radio-group>

文本内容来自文档：https://developers.weixin.qq.com/miniprogram/dev/component/radio.html