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


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 相关文章推荐
js获取系统的根路径实现介绍
Sep 08 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 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 压缩文件夹的类代码
2009/11/05 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
webpack打包nodejs项目的方法
2018/09/26 NodeJs
微信小程序-form表单提交代码实例
2019/04/29 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
python中scikit-learn机器代码实例
2018/08/05 Python
wxPython的安装与使用教程
2018/08/31 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
Python reversed函数及使用方法解析
2020/03/17 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
Europcar比利时:租车
2019/08/26 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
如何客观的进行自我评价
2013/12/17 职场文书
警察思想汇报
2014/01/04 职场文书
双拥工作宣传标语
2014/06/26 职场文书
营销学习心得体会
2014/09/12 职场文书
2015年中个人总结范文
2015/03/10 职场文书
Redis分布式锁Redlock的实现
2021/08/07 Redis