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


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 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
js全选按钮的实现方法
Nov 17 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 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实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python 如何测试文件是否存在
2020/07/31 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
为什么需要版本控制?
2013/08/08 面试题
婚庆公司的创业计划书
2014/01/22 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
教师工作证明范本
2015/06/12 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
2017新年晚会开幕词
2016/03/03 职场文书