微信小程序实现标签多选框

Html

<input wx:for="{`在这里插入代码片`{taglist}}" wx:for-item="item" wx:key="index" name="tag" value="{{item.name}}" disabled="true"bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}" checked="{{item.isSelected}}" class="{{item.isSelected ? '_on' : ''}}" />

css

 input{width: 30%;height: 50rpx;line-height: 50rpx;text-align: center;margin: 0 10rpx;margin-top: 20rpx;border: 1rpx solid #EFF2F8;border-radius: 100rpx;background-color: rgb(238, 238, 238);}._on {color: #ab0a3d;border: 1rpx solid #ab0a3d;}

data: {taglist: [{value: '五险一金',name: '五险一金',isSelected: false,},{value: '包吃包住',name: '包吃包住',isSelected: false,},{value: '朝九晚五',name: '朝九晚五',isSelected: false,},]},checkboxChange: function (e) {console.log('tab e:',e);let string = "taglist["+e.target.dataset.index+"].isSelected"this.setData({[string]: !this.data.taglist[e.target.dataset.index].isSelected})let detailValue = this.data.taglist.filter(it => it.isSelected).map(it => it.value)console.log('所有选中的值为：', detailValue)console.log(detailValue.join(","))}

微信小程序实现标签多选框相关推荐

修改微信小程序单选，复选框样式
xml <label class="checkbox"><checkbox checked="checked" disabled />获 ...
微信小程序蓝牙标签打印/标签云打印开放平台（2）
微信小程序蓝牙标签打印/标签云打印开放云平台(下面简称"平台" www.herro.cn 技术服务TEL:15759216805),支持开发者通过API调用完成标签蓝牙打印或标签云 ...
微信小程序checkbox的全选以及所有checkbox选中之后的全选
微信小程序checkbox的全选以及所有checkbox选中之后的全选微信小程序checkbox的全选以及所有checkbox选中之后的全选第一次写,软件都不懂,直接把代码拷过来了模板 WXML ...
基于微信小程序Map标签及高德地图开源方法实现路径导航
微信小程序自带地图map标签,他是基于canvas画图功能进行的地图渲染,同时依赖微信的getlocation获取经纬度,绘制周边地图.地图上可以标点,画线,查看当地地理信息.但是自带的导航功能模块不 ...
微信小程序之select下拉框
wxml: <view class="classify-kuangjia"><view class="classify-kuangjia2"& ...
微信按钮android代码实现原理,微信小程序button标签open-type实现原理
这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 open-type (微信 ...
微信小程序时间标签与范围联动设计实现
微信小程序时间标签与范围联动设计实现?最近忙于一个有关数据管理的微信小程序开发,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.pic ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
标签云打印/微信小程序蓝牙标签打印开放平台功能
微信小程序蓝牙标签打印/标签云打印开放平台(www.herro.cn),是在云端部署的云平台,支持开发者通过API调用完成标签蓝牙打印或标签云打印功能. 平台蓝牙打印模块支持各厂商各品牌蓝牙标签打印 ...

微信小程序实现标签多选框

微信小程序实现标签多选框相关推荐

最新文章

热门文章

微信小程序 实现标签多选框

微信小程序 实现标签多选框相关推荐

最新文章

热门文章

微信小程序实现标签多选框

微信小程序实现标签多选框相关推荐