[微信小程序]单选框以及多选框实例代码附讲解

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：

效果图

      <radio-group class="radio-group" bindchange="radioChange"><label class="radio" wx:for="{{k7}}" wx:key="index"><radio value="{{item.arr_guige02}}" bindtap='radio' data-id="{{item.guige_key02}}" checked="{{item.checked}}"/>{{item.arr_guige02}}</label></radio-group>

--- > >> k7的数据

这里我的需求是要用户选择的单选框的value可以它的id , 所有用了两个事件

radioChange 是单选框选中事件,用于获取选中的单选框的value

radio 是点击事件,用于获取点击的该组件的id

下面是js代码:

// 获取该组件的idradio:function(e){this.setData({guige_key02: e.currentTarget.dataset.id})console.log(e.currentTarget.dataset.id)},// 发货地址选择,获取用户选择的单选框的值radioChange: function (e) {this.setData({arr_guige02: e.detail.value})console.log(e.detail.value)},

下面的操作也Log出来的GIF图: 这里可以看到,当我选择单选框其中一个的时候,会打印出来它的id和value,是不是很简单?

多选框：

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

Page({data: {items: [{ name: 'USA', value: '美国' },{ name: 'CHN', value: '中国', checked: 'true' },{ name: 'BRA', value: '巴西' },{ name: 'JPN', value: '日本' },{ name: 'ENG', value: '英国' },{ name: 'TUR', value: '法国' },]},checkboxChange: function (e) {console.log('checkbox发生change事件，携带value值为：', e.detail.value)}
})

[微信小程序]单选框以及多选框实例代码附讲解相关推荐

java实现音频播放小程序_微信小程序实现音频文件播放进度的实例代码
问题描述在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现. 解决方案首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进 ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序实现即时通信聊天功能的实例代码
项目背景:小程序中实现实时聊天功能一.服务器域名配置配置流程配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-ne ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
微信小程序开发【前端+后端（Java）】附完整源码，拿来接私活简直不要太香
一.前言现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,所以现在用这篇博客记录我之前开发的一些经验和一些心得吧. 二.主要内 ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
php微信小程序物流进度推送,微信小程序消息推送php服务器验证实例详解
微信小程序消息推送php服务器验证实例详解设置页面("设置">>"开发设置"): 1.设置服务器域名注意http和https协议的不同. 2. ...
wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器微信小程序中实现上传视频的开发代码易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码效果图在输入框中进行内容的输入点击确认后在姓名一栏进行更新修改点击返回后姓名一栏不做任何修改在这个的基础上你可以自定义任何弹窗 wx ...

[微信小程序]单选框以及多选框实例代码附讲解

承接微信小程序开发。扫码加微信。

正文：

[微信小程序]单选框以及多选框实例代码附讲解相关推荐

最新文章

热门文章