微信小程序自定义复选框
更新时间:2022年07月07日 11:43:35 作者:asteriaV
这篇文章主要为大家详细介绍了微信小程序自定义复选框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序自定义复选框的具体代码,供大家参考,具体内容如下
1、效果
2、wxml
<checkbox-group bindchange="checkboxChange" class="checkbox-group"> <view wx:for="{{checkboxArr}}" wx:key="index" class="padding-xs"> <label class="{{item.checked?'checkbox checked':'checkbox'}}" bindtap='checkbox' data-index="{{index}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}} </label> </view> </checkbox-group>
3、js
data:{ checkboxArr: [ { checked: false,//是否选中 id: "1",//部门能id name: "部门1", }, { checked: false,//是否选中 id: "2",//部门能id name: "部门2", }, { checked: false,//是否选中 id: "3",//部门能id name: "部门3", }, { checked: false,//是否选中 id: "4",//部门能id name: "部门4", }, { checked: false,//是否选中 id: "5",//部门能id name: "部门5", }, { checked: false,//是否选中 id: "6",//部门能id name: "部门6", },] }, checkbox: function (e) { var index = e.currentTarget.dataset.index;//获取当前点击的下标 var checkboxArr = this.data.checkboxArr;//选项集合 checkboxArr[index].checked = !checkboxArr[index].checked;//改变当前选中的checked值 this.setData({ checkboxArr: checkboxArr }); }, checkboxChange: function (e) { var checkValue = e.detail.value; console.log(e.detail.value) this.setData({ checkValue: checkValue }); },
4、wxss 局部样式
.checkbox-group{ display: flex; flex-wrap: wrap; } .checkbox{ display: flex; align-items: center; padding: 10rpx; color: #aaaaaa; border: 2rpx solid #CECECE; border-radius: 5rpx; justify-content: center; margin-right: 20rpx; } .checked{ color: #3eace2; background: rgba(49,165,253,0.08); border: 1rpx solid #3eace2; } .checkbox-group checkbox{ display: none }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
深入浅析JavaScript系列(13):This? Yes,this!
在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题2016-01-01js与jquery获取父级元素,子级元素,兄弟元素的实现方法
本篇文章主要是对js与jquery获取父级元素,子级元素,兄弟元素的实现方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助2014-01-01基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
本篇文章主要介绍如何实现Web页面内容的打印预览和保存操作的相关知识,感兴趣的朋友一起学习吧2016-05-05该如何加载google-analytics(或其他第三方)的JS
很多网站为了获取用户访问网站的统计信息,使用了google-analytics或其他分析网站(下面的讨论中只提google-analytics,简称ga)。2010-05-05
最新评论