- 综合排序
- 最热优先
- 最新优先
- 来自专栏艺述论专栏
微信小程序分享12: picker选择器与radio单选框
2，radio单项选择器 单选与复选类似，使用了一个radio-group群组，它有一个change事件。radio放在radio-group里面。 练习：使用block标签改写radio-group。
1.9K30编辑于 2022-03-08 - 来自专栏神葳总局
小程序多选和单选组件的封装
-- 单选组件 --> <radio-group class="radio-group" bindchange="radioChange" wx:if="{{selectType view> </view> <view class='flex-item text-center'>{{item.value}}</view> </label> </radio-group , .checkbox-group { margin: 0 auto; width: 490rpx; } .radio-group label, .checkbox-group label { label.active, .checkbox-group label.active { background-color: #fcc919; } .radio-group label .item-index position: relative; flex: 0 0 40rpx; margin: 0 0 0 20rpx; width: 40rpx; height: 68rpx; } .radio-group
1.1K10发布于 2021-01-22 - 来自专栏Rattenking
微信小程序----radio组件
效果图 WXML <view class="tui-content"> <radio-group class="radio-group" bindchange="radioChange"> ="#007aff" value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</view> </label> </radio-group
1.3K40发布于 2021-02-01 - 来自专栏编程微刊
uniapp提交选中的性别的value值
value: 1 }], 2:在view，写一下标签 直接在官方文档里面查找 https://uniapp.dcloud.io/component/radio <radio-group </view> <view>{{item.name}}</view> </label> </radio-group <template> <view class="cu-form-group"> <view class="title">性别</view> <radio-group value="item.value" :checked="item.checked" />{{item.label}} </label> </radio-group
24200编辑于 2025-05-19 - 来自专栏编程微刊
uniapp提交选中的性别的value值
value: 1 }], 2:在view，写一下标签 直接在官方文档里面查找 https://uniapp.dcloud.io/component/radio <radio-group </view> <view>{{item.name}}</view> </label> </radio-group <template> <view class="cu-form-group"> <view class="title">性别</view> <radio-group value="item.value" :checked="item.checked" />{{item.label}} </label> </radio-group
2.6K10发布于 2020-07-23 - 来自专栏meishadevs的前端专栏
小程序开发笔记
</view> <view class="screenform-select"> <radio-group class="radio-group" id="1" bindchange </view> <view class="screenform-select"> <radio-group class="radio-group" id="2" bindchange </view> <view class="screenform-select"> <radio-group class="radio-group" id="3" bindchange </view> <view class="screenform-select"> <radio-group class="radio-group" id="4" bindchange true : false }}" value="0" /> 否 </label> </radio-group> </view> </view> </view> 在
4.7K20编辑于 2023-04-13 - 来自专栏极客起源
微信小程序开发实战（10）：单选、多选和开关组件
单选组件（radio） radio是选项按钮组件，该组件不能单独使用，必须作为radio-group的子组件使用，否则多个radio只有一个被选中。 如果要监听radio组件的触发事件，需要使用radio-group组件的bindchange属性，该属性绑定的函数需要指定一个参数（假设为event），通过event.detail.value，可获取当前选中了哪个 value：String类型，radio组件的返回值，当radio组件被选中时，radio-group组件的change事件会返回选中radio组件的value值，也就是event.detail.value <radio-group bindchange="radioChange"> <label style="display:block;margin:10px" > <radio value= > 要注意的是，如果radio-group中有多个radio组件的checked属性都设为true，那么系统会默认选中最后一个checked属性设为true的radio组件。
7.2K20发布于 2020-07-16 - 来自专栏全栈开发那些事
微信小程序常用表单组件
1.6 radio <radio>为单选框组件，往往需配合<radio-group>组件来使用，<radio>标签嵌套在<radio-group>当中。 小案例</view> <view class="title">利用for循环批量生成</view> <radio-group bindchange="radioChange"> <block </view> <radio-group bindchange="universityChange"> <radio value="大一"/>大一 <radio value ="大二"/>大二 <radio value="大三"/>大三 <radio value="大四"/>大四 </radio-group> <view class </view> <radio-group bindchange="programChange"> <radio value="无"/>无 <radio value="有"
3K10编辑于 2023-02-25 - 来自专栏小鑫同学编程历险记
「35分钟」开发刷题功能
通过简单的筛选分析得到以下几个特点： 数据类型：题干、选项、答案、难度、题型、试题解析（内容均为空就不做考虑了）； 题干、难度：仅做展示即可； 题型：分为单选题、多选题、判断题，单选可多选统一使用radio-group 实现选项选择，多选题使用checkbox-group实现选项选择； 选项： 单选选项使用 “#” 分割，radio-group绑定时需要通过 “、” 拆分为选项值和选项显示内容； 多选选项使用同单选选项拆分数据 disabled="item.show" :value="option.split('、')[0]" /> {{option}} </view> </label> </radio-group label> </checkbox-group> </view> 3.3 判断题选项： <view class="uni-list" v-if="item.type === '判断题'"> <radio-group #747474" :disabled="item.show" :value="option" /> {{option}} </view> </label> </radio-group
66020编辑于 2022-12-26 - 来自专栏前端资源
微信小程序的单选框和复选框的使用
WXML： <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
4.7K20发布于 2019-11-13 - 来自专栏云点播视频的问题
小程序-云点播
/Resources/copy.png'></image> </view> <view class='item'> <text class='item-title'>画面质量</text> <radio-group class="radio-group" bindchange="modeRadioChange"> <label class="radio" wx:for="{{modeItems}}" wx:key 'blue'}}"> <radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.title}} </label> </radio-group > </view> <view class='item'> <text class='item-title'>画面方向</text> <radio-group class="radio-group 'blue'}}"> <radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.title}} </label> </radio-group
5.8K10发布于 2020-06-04 - 来自专栏itclanCoder
微信小程序-如何获取用户表单控件中的值
checked name="switchChecked" /> </view> <view> <view class="title">radio</view> <radio-group label><radio checked value="boy" />男</label> <label><radio value="girl" />女</label> </radio-group important; } 在上面的示例代码中,你会发现当有多个radio,多个checkbox时,它会被包裹在radio-group,checkbox-group中,不然是无法获取到控件中的具体数值的 -- radio-group是不能少的,否则就会出问题的,下面的checkbox-group也是 --> <radio-group bindchange="handleRadio"> label><radio checked value="boy" />男</label> <label><radio value="girl" />女</label> </radio-group
9.5K12发布于 2020-10-28 - 来自专栏程序猿的大杂烩
Form表单类组件与Map地图组件
slider组件的官方说明文档如下： https://mp.weixin.qq.com/debug/wxadoc/dev/component/slider.html ---- form之radio-group 组件 radio-group是单项选择器，也就是单选框，而其内部由多个<radio/>单选项目组成，示例代码如下： <view> <view class='title'>radio</view > <view class='radio_view'> <radio-group name='radio-group' bindchange='onRadioChange'> < " /> <view class="section section_gap"> <view class="section__title">radio</view> <radio-group name="radio-group"> <label> <radio value="漓江塔" />漓江塔</label> <label>
1.6K30发布于 2020-09-23 - 来自专栏达达前端
快速上手mpvue 项目
methods: { bindPickerChange (e) { console.log(e) } } } </script> <template>
<radio-group class="radio-group" @change="radioChange"> <label class="radio" v-for="(item, index) in items" item.name"> <radio :value="item.name" :checked="item.checked"/> {{item.value}} </label> </radio-group97840发布于 2019-07-03来自专栏软件事业部专栏微信小程序官方组件展示之表单组件radio源码
当该radio 选中时，radio-group 的 change 事件会携带radio的value1.0.0checkedbooleanFALSE否当前是否选中1.0.0disabledbooleanFALSE class="page-section-title">推荐展示样式</view> <view class="weui-cells weui-cells_after-title"> <radio-group > </view> <view class="weui-cell__bd">{{item.name}}</view> </label> </radio-group
97730编辑于 2022-09-21来自专栏编程微刊uniapp改变radio大小-属性transform: scale()
直接添加了这个属性 <view class="cu-form-group"> <view class="title">性别</view> <radio-group span style="margin-right:10px">{{item.label}} </label> </radio-group
2.3K20发布于 2021-01-14来自专栏友儿微信小程序常用的组件
checkbox-group使用，checkbox标签要包裹在checkbox-group中使用 radio 单选按钮 具有开闭标签，可以在开闭标签内写上单选文字内容 value：可以填入真实的值 如果要实现单选必须配合radio-group 使用，radio标签要包裹在radio-group中使用 block 标签块，其本身不会被渲染到页面中，只有其内部的标签会被渲染
51630编辑于 2022-09-11来自专栏达达前端微信小程序-form表单-获取用户输入文本框的值
/> </view> </view> <view class='item'> \r\n\r\n\r\n\r\n\r\n\r\n\r\n性别： <radio-group class="radio-group" bindchange="radioChange" name='formsex'> <! <radio value="{{items[1].name}}" checked='{{gril}}' /> {{items[1].value}} </label> </radio-group
3.6K30编辑于 2022-04-29来自专栏各类技术文章~Vue复习姿势系列之UI组件——单选框(Radio)
单选组框 该功能实现方式是创建个radio-group组件将radio包裹，radio功能由父级接管。 radio-group的disabled具体逻辑比较简单，只需根据disabled值来调整radio组件内的myDisabled属性即可。 创建radio-group组件： src/packages目录下新建radio-group文件夹，文件夹内创建radio-group.vue和index.js。 button属性设置给radio-group，由父级接管该功能。 border-color; font-size: $--font-size-medium; } } 复制代码 结语 以上便是单选框组件的部分功能开发过程，单选框组功能中我们创建了新的组件radio-group
5.6K00发布于 2021-10-19来自专栏Python in AI-IOT高质量编码--Excel POI点高德地图展示
<script type="text/template" id="toggleTemplate"> <% _.each(layers,(points,name)=> { %>
<%=name%><% }) %> <div class="<em>radio-group</em> right: 0; top: 23%; z-index: 999; width: 80px; } .<em>radio-group</em> marker.getTitle(), direction: 'top' });})}) } });$('#mapgroup').delegate('.<em>radio-group</em>1.2K30编辑于 2023-01-18
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号