微信小程序例子——使用radio显示单选项

最新推荐文章于 2025-06-20 23:44:18 发布

FutrueJet

最新推荐文章于 2025-06-20 23:44:18 发布

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序开发例子微信小程序开发例子【表单组件】文章标签： Web前端互联网微信小程序编程语言前端开发

本文链接：https://blog.youkuaiyun.com/FutrueJet/article/details/52853492

微信小程序开发例子同时被 2 个专栏收录

65 篇文章

订阅专栏

微信小程序开发例子【表单组件】

7 篇文章

订阅专栏

本文介绍了一个使用微信小程序实现的单选按钮组案例，包括效果展示、关键代码及获取完整源代码的方式。通过简单的 index.wxml 和 index.js 文件，展示了如何在小程序中设置并响应单选按钮组的选择变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、效果展示

2、关键代码

index.wxml


  radio1
  radio2
  radio3

提示：{{text}}

index.js

Page({
  data:{
    // text:"这是一个页面"
    text:''
  },  
  radiogroupBindchange:function(e){
    this.setData({
      text:'您选择了'+e.detail.value
    })
  }
})

3、源代码获取方式

百度云链接：http://pan.baidu.com/s/1eScBBTg

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

FutrueJet

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序控件新秀：掌握Radio与Checkbox、Cell的实战入门秘籍【代码示例】

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

05-08

1472

掌握了radiocheckbox及cell的使用，你的小程序交互设计将更加丰富多元。在实际开发中，你是否遇到过哪些有趣或棘手的问题？是否有更高效的实现技巧或优化方案愿意分享？在评论区留下你的见解，让我们共同探讨，不断优化微信小程序的表单选择控件应用，提升用户体验的每一个细节。此外，对于无障碍设计在这些控件中的融入，你有哪些思考？如何让小程序更加包容性更强？期待你的声音。欢迎来到我的博客，很高兴能够在这里和您见面！

微信小程序项目快速开发

jimson_zhu的博客

11-03

805

一）何为微信小程序 张小龙说：小程序是一种不需要安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。小程序能做什么：查天气、查交通、翻译、点餐、娱乐……都可以实现，覆盖了生活的方方面面。小程序的定位：比网站体验好——可以使用手机原生的底层接口，比如...

参与评论您还未登录，请先登录后发表或查看评论

微信小程序——radio组件

Kinggitte的書棚

01-11

1318

a.js 没啥可说的，单纯的数据罗列 data: { array: [ { name: '1', value: 'select 1', checked: 'true' }, { name: '2', value: 'select 2' }, { name: '3', value: 'select 3' }, { name: '4', value: 'sele

微信小程序——Radio实现单选功能

zkw_1998的博客

04-07

2531

1.wxml代码 <text>请选择你的测试场景</text> <radio-group bindchange="radiochange"> <radio value='Q3'>3m安静</radio> <radio value='P1'>1m强干扰</radio> <radio value='S3' &gt...

小程序修改radio选中时的颜色

最新发布

weixin_61697862的博客

06-20

235

修改微信小程序radio组件选中颜色的方法有两种：1) 直接设置color属性为自定义色值；2) 通过CSS样式深度修改。使用第二种方法时，需添加custom-radio类并设置相关样式：未选中状态边框色(#ccc)、选中状态背景色和边框色(#54c8e8)，同时隐藏默认图标。关键点包括使用::v-deep深度选择器和!important优先级标识。该方法能有效覆盖默认样式，实现完全自定义的radio按钮效果。

【微信小程序---radio单选框讲解】

m0_56349322的博客

02-22

1万+

radio 单选框 1 radio 标签必须要和父元素 radio-group 来使用 2 value 选中的单选框的值 3 需要给 radio-group 绑定 change 事件 bindchange=“handleChange” 4 需要在页面中显示选中的值 radio单选框.wxml <radio-group bindchange="handleChange"> <radio value="male">男</radio> <radio

微信小程序radio组件使用详解

08-28

主要为大家详细介绍了微信小程序radio组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

小程序，radio隐藏勾选+数组的使用

weixin_43993121的博客

01-04

934

小程序radio单选框回显

皮皮的博客

12-21

1706

话不多说，效果图如下：具体代码如下： js代码如下：希望能帮到你们，记得点赞收藏哦！

微信小程序之自定义表单组件(radio)

北边一颗小星星

05-24

1万+

背景：最近在做项目的时候遇到一个问题，那就是微信的官方表单组件的可扩展性不强，无法达到设计稿所要求的效果，所以想到了用自定义组件的方法自定义一个表单组件。（自定义组件其实往往用在需要复用的地方，比如每个页面都有一样的头部和底部，那么我们就可以把它们封装到自定义组件中，这样就不用每个页面都复制粘贴一样的一堆代码了）开始：下面以自定义radio组件为例：官方radio的样式只能修改color(当然要修改其他样式也是有办法的，不过较为麻烦，这里先不提)，扩展性不强。而我想要达到类似

微信小程序开发的学习资料收集

热门推荐

zhan9le的博客

06-28

1万+

小程序开发学习资料集合

微信小程序如何实现radio单选框单击打勾和取消

11-21

前端使用input 来写radio,小程序使用radio标签也可以使用单标签 1.自定义radio样式、 wx默认的是真的丑 /* 单选框样式 */ /* 初始样式 */ radio .wx-radio-input{ width: 32rpx; height: 32rpx; border-radius: 0 } /* 选中后的背景样式（背景边框） */ radio .wx-radio-input.wx-radio-input-checked{ width: 32rpx; /* 选中后对勾大小，不要超过背景的尺寸 */ height: 32rpx

微信小程序 radio单选框组件详解及实例代码

11-28

微信小程序内嵌radio的小弹窗

09-06

在开发微信小程序中，弹窗虽然可以使用wx.showModel的API，但是这个API不够强大，content中的内容只能是String类型，如果我们想在content中加入一些单选框或者复选框来做一些数据统计时，该如何办呢？这里我写了一个可以内嵌组件的弹窗，可以查看我的博客看效果

微信小程序开发：调查问卷案例详解与代码实现

本资源是一份关于微信小程序开发的教程，特别是针对第4章中的一个具体案例——调查问卷功能的实现。首先，我们关注于"调查问卷"这个页面的设计和编码。该页面由三个主要部分构成：`index.json`、`wxml` 和 `wxss` ...

微信小程序源码分享—智能小蜜

u011827504的博客

08-14

4112

该程序支持功能有查天气、查诗词、查百科、算算术、看笑话等。

使用微信小程序开发制作一个简易的在线问卷调查应用

吃不胖.

03-15

349

在微信开发者工具中，点击“云开发”按钮，然后点击“登录并开通云开发”。至此，我们已经完成了一个简易的在线问卷调查应用的开发。当然，这只是一个简单的示例，您可以根据自己的需求对其进行扩展和优化。在微信开发者工具中，点击“预览”按钮，可以在模拟器中测试和调试我们的小程序。在开始开发之前，我们需要设计数据库模型并创建数据库。输入项目名称、选择合适的路径，并选择小程序的类型为“普通小程序”。在上述代码中，我们首先初始化云开发，然后获取数据库实例和问卷集合。函数是云函数的入口函数，它会返回问卷集合的数据。

微信小程序选择按钮

尘封的落叶的博客

04-15

2864

1.单选：radio实例：js:Page({data : {radioId:"",loves:[{id:1， name:"跑步" ，checked : 'true'},{id:2， name:"篮球" },{id:3， name:"足球" },]},updataRadio:function(e){var Id=e.value.idthis.setData({radioId:Id})},})wxml...

【微信小程序】radio单选框(83/100）

lichong951的专栏

07-20

3304

简单的点胜过复杂的高明

微信小程序解包工具——wxappUnpacker使用教程

本文档标题为“反编译wxapkg文件的工具”，说明本文旨在介绍和指导如何使用特定工具对微信小程序的打包文件进行反编译。描述部分提醒用户阅读文档、指出工具依赖Node.js环境，并提供了相关工具包的下载和参考资料...