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


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选择器的工作原理和优化分析
Jul 25 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
vue中component组件的props使用详解
Sep 04 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
小程序实现分类页
Jul 12 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 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获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PHP学习资料汇总与网址
2007/03/16 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
document.addEventListener使用介绍
2014/03/07 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
python学习之matplotlib绘制散点图实例
2017/12/09 Python
python3调用R的示例代码
2018/02/23 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
Python版名片管理系统
2018/11/30 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
应届大学生自荐信
2013/12/05 职场文书
展会邀请函范文
2014/01/26 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
入股协议书范本
2014/11/01 职场文书
商场营业员岗位职责
2015/04/14 职场文书
单位证明范文
2015/06/18 职场文书