经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序单选radio及多选checkbox按钮用法示例
来源：jb51　　时间：2019/4/30 12:15:18　　对本文有异议

本文实例讲述了微信小程序单选radio及多选checkbox按钮用法。分享给大家供大家参考，具体如下：

1.单选：radio

实例：

js:

  1. Page({
  2. data : {
  3. radioId:"",
  4. loves:[
  5. {id:1, name:"跑步" ,checked : 'true'},
  6. {id:2, name:"篮球" },
  7. {id:3, name:"足球" },
  8. ]
  9. },
  10. updataRadio:function(e){
  11. var Id=e.value.id
  12. this.setData({
  13. radioId:Id
  14. })
  15. },
  16. })
  17.  

wxml:

  1. <radio-group class="radio" bindChange="updataRadio">
  2. <view wx:for="{{loves}}">
  3. <radio value="{{item.id}}" checked="{{item.checked}}">{{item.name}}</radio>
  4. </view>
  5. </radio-group>
  6.  

2.多选：CheckBox

实例：

js:

  1. Page({
  2. data : {
  3. radioId:[],
  4. loves:[
  5. {id:1, name:"跑步" ,checked : 'true'},
  6. {id:2, name:"篮球" },
  7. {id:3, name:"足球" },
  8. ]
  9. },
  10. updataRadio:function(e){
  11. var Id=e.value.id
  12. this.setData({
  13. radioId:Id
  14. })
  15. },
  16. })
  17.  

wxml:

  1. <checkbox-group class="checkbox" bindChange="updataRadio">
  2. <view wx:for="{{loves}}">
  3. <chechbox value="{{item.id}}" checked="{{item.checked}}">{{item.name}}</chechbox>
  4. </view>
  5. </checkbox-group>
  6.  

附：多选获得的值是一个数组，单选获得的值是一个单值

希望本文所述对大家微信小程序开发有所帮助。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号