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


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 相关文章推荐
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 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
从wamp到xampp的升级之路
2015/04/08 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
php微信公众号开发之简答题
2018/10/20 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
Python程序设计入门(1)基本语法简介
2014/06/13 Python
详解Python编程中time模块的使用
2015/11/20 Python
Python输出带颜色的字符串实例
2017/10/10 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
python环境下安装opencv库的方法
2020/03/05 Python
python变量的作用域是什么
2020/05/26 Python
Python 实现一个计时器
2020/07/28 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
党员群众路线承诺书
2014/05/20 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
公司催款律师函
2015/05/27 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js