微信小程序实现多选框功能的实例代码


Posted in Javascript onJune 24, 2020

我们先来看看效果: 两种状态: 选中/不选中

微信小程序实现多选框功能的实例代码

wxml

<!-- 选择 S -->
 <view wx:for="{{riderCommentList}}" wx:for-item="item" wx:key="index" bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}" checked="{{item.selected}}" class="btn {{item.selected ? 'btn-selected' : ''}}" >
   {{item.title}}
 </view>
 <!-- 选择 E -->

核心js

Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  riderCommentList: [{
   value: '商品品质',
   selected: false,
   title: '商品品质'
  }, {
   value: '眉笔质地',
   selected: false,
    title: '眉笔质地'
  }, {
   value: '最新',
   selected: false,
    title: '最新'
  }, {
   value: '正品',
   selected: false,
    title: '正品'
  }, {
   value: '包装完整',
   selected: false,
    title: '包装完整'
  }, {
   value: '是否防水',
   selected: false,
    title: '是否防水'
  }, {
   value: '其他',
   selected: false,
   title: '其他'
  }]
 },
 checkboxChange(e) {
  console.log('checkboxChange e:', e);
  let string = "riderCommentList[" + e.target.dataset.index + "].selected"
  this.setData({
   [string]: !this.data.riderCommentList[e.target.dataset.index].selected
  })
  let detailValue = this.data.riderCommentList.filter(it => it.selected).map(it => it.value)
  console.log('所有选中的值为:', detailValue)
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 
 },
 
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 
 },
 
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 
 },
 
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 
 },
 
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 
 },
 
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 
 }
})

wxss 

.btn{
  font-size: 24rpx;
  padding: 12rpx 19rpx;
  border: 1px solid #dcdcdc;
  background: #F8F8F8;
  border-radius: 10rpx;
  margin-right: 30rpx;
  margin-bottom: 22rpx;
  text-align: center;
  display: inline-block;
  color: #666666;
}
.btn:nth-child(5) {
 margin-right: 0;
}
.btn-selected{
  border: 1px solid #FF7C80;
  color: #F73C41;
  background: #FFFFFF;
}

总结

到此这篇关于微信小程序实现多选框功能的实例代码的文章就介绍到这了,更多相关微信小程序 多选框功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 #Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 #Javascript
js实现html滑动图片拼图验证
Jun 24 #Javascript
微信小程序的引导页实现代码
Jun 24 #Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 #Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 #Javascript
javascript实现前端成语点击验证优化
Jun 24 #Javascript
You might like
PHP生成UTF8文件的方法
2010/05/15 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python如何绘制日历图和热力图
2020/08/07 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
教师辞职报告范文
2014/01/20 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
教师节主持词开场白
2015/05/29 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
python中pymysql包操作数据库方法
2022/04/19 Python
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python