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


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 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
详解Vue串联过滤器的使用场景
Apr 30 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 ajax 分页类代码
2008/11/13 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python去除字符串两端空格的方法
2015/05/21 Python
Python中的urllib模块使用详解
2015/07/07 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
python 一维二维插值实例
2020/04/22 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
视图的作用
2014/12/19 面试题
木马的传播途径主要有哪些
2016/04/08 面试题
详细的大学生创业计划书模板
2014/01/27 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
小学见习报告
2015/06/23 职场文书