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


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 表单验证方法(实用)
Apr 28 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
浅析微信扫码登录原理(小结)
Oct 29 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 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设计模式之单例模式使用示例
2014/01/20 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
原生JS轮播图插件
2017/02/09 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python编码类型转换方法详解
2016/07/01 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python装饰器的特性原理详解
2019/12/25 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
生产副总岗位职责
2013/11/28 职场文书
高考备战决心书
2014/03/11 职场文书
健康状况证明模板
2014/10/23 职场文书
写给医生的感谢信
2015/01/22 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript