微信小程序–单选复选按钮组的实现
大家好，又见面了，我是你们的朋友全栈君。
本文主要介绍微信小程序单选按钮很多选按钮的实现方式。众所周知，小程序目前无法绑定DOM截点，实现的原理就是通过bindtap点击的事件方法获取data-id进行循环遍历取反而实现该效果。
（一）单选按钮组
模型图如下：
这里写图片描述
index.js
Page({
data: {
parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ id: 3, name: '黑色' }],//模拟商品参数数据，如果是线上版本需要自行发起request请求
},
onLoad: function (options) {
this.data.parameter[0].checked = true;
this.setData({
parameter: this.data.parameter,
})//默认parameter数组的第一个对象是选中的
},
// 参数点击响应事件
parameterTap:function(e){//e是获取e.currentTarget.dataset.id所以是必备的，跟前端的data-id获取的方式差不多
var that=this
var this_checked = e.currentTarget.dataset.id
var parameterList = this.data.parameter//获取Json数组
for (var i = 0; i < parameterList.length;i++)发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/139625.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年5月7，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。