小程序实现单选多选功能


Posted in Javascript onNovember 04, 2018

小程序的单选组件radio和多选组件checkbox的样式只提供更改颜色,这对实际项目中的需求显然是不够的,所以自己模拟实现一个。

踩坑点:小程序不支持操作dom

1、模拟实现多选框:

实现思路:思路非常简单,给每个选项绑定checked属性,类型为布尔值,点击取反即可

<!--wxml-->
<view class='wrap'>
 <view class='checkbox-con'>
 <checkbox-group bindchange="checkboxChange">
  <label class="{{item.checked?'checkbox checked':'checkbox'}}" wx:for="{{checkboxArr}}" bindtap='checkbox' data-index="{{index}}" wx:key="item.name">
  <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
  </label>
 </checkbox-group>
  <button type='primary' bindtap='confirm'>提交</button>
 </view>
</view>
/* wxss */
.wrap{
 width: 550rpx;
 margin: 50rpx auto
}
 
.checkbox-con{
 margin-top: 40rpx;
 text-align: center
}
.checkbox{
 width: 260rpx;
 height: 72rpx;
 line-height: 72rpx;
 font-size: 28rpx;
 color: #888888;
 border: 1rpx solid #CECECE;
 border-radius: 5rpx;
 display: inline-block;
 margin: 0 10rpx 20rpx 0;
 position: relative
}
.checked{
 color: #1A92EC;
 background: rgba(49,165,253,0.08);
 border: 1rpx solid #31A5FD;
}
.checkbox checkbox{
 display: none
}
.checked-img{
 width: 28rpx;
 height: 28rpx;
 position: absolute;
 top: 0;
 right: 0
}

js: 

Page({
 data: {
 checkboxArr: [{
  name: '选项A',
  checked: false
 }, {
  name: '选项B',
  checked: false
 }, {
  name: '选项C',
  checked: false
 }, {
  name: '选项D',
  checked: false
 }, {
  name: '选项E',
  checked: false
 }, {
  name: '选项F',
  checked: false
 }],
 },
 checkbox: function (e) {
 var index = e.currentTarget.dataset.index;//获取当前点击的下标
 var checkboxArr = this.data.checkboxArr;//选项集合
 checkboxArr[index].checked = !checkboxArr[index].checked;//改变当前选中的checked值
 this.setData({
  checkboxArr: checkboxArr
 });
 },
 checkboxChange: function (e) {
 var checkValue = e.detail.value;
 this.setData({
  checkValue: checkValue
 });
 },
 confirm: function() {// 提交
 console.log(this.data.checkValue)//所有选中的项的value
 },
})

2、模拟实现单选框

思路:这个和多选差不多,区别就是需要在点击时清空其他项的选中状态,然后再把当前项设置为选中状态

代码也差不多

wxml的话就把check-group标签改为radio-group; js那边就在点击时多加个判断

<!--wxml-->
<view class='wrap'>
 <view class='checkbox-con'>
 <radio-group bindchange="radioChange">
  <label class="{{item.checked?'checkbox checked':'checkbox'}}" wx:for="{{checkboxArr}}" bindtap='radio' data-index="{{index}}" wx:key="item.name">
  <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
  </label>
 </radio-group>
  <button type='primary' bindtap='confirm'>提交</button>
 </view>
</view>
Page({
 data: {
 checkboxArr: [{
  name: '选项A',
  checked: false
 }, {
  name: '选项B',
  checked: false
 }, {
  name: '选项C',
  checked: false
 }, {
  name: '选项D',
  checked: false
 }, {
  name: '选项E',
  checked: false
 }, {
  name: '选项F',
  checked: false
 }],
 },
 radio: function (e) {
 var index = e.currentTarget.dataset.index;//获取当前点击的下标
 var checkboxArr = this.data.checkboxArr;//选项集合
 if (checkboxArr[index].checked) return;//如果点击的当前已选中则返回
 checkboxArr.forEach(item => {
  item.checked = false
 })
 checkboxArr[index].checked = true;//改变当前选中的checked值
 this.setData({
  checkboxArr: checkboxArr
 });
 },
 radioChange: function (e) {
 var checkValue = e.detail.value;
 this.setData({
  checkValue: checkValue
 });
 },
 confirm: function() {// 提交
 console.log(this.data.checkValue)//所有选中的项的value
 },
})

最后上个效果截图

小程序实现单选多选功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 #Javascript
微信小程序实现登录注册tab切换效果
Dec 29 #Javascript
原生js实现淘宝放大镜效果
Oct 28 #Javascript
微信小程序如何获取手机验证码
Nov 04 #Javascript
微信小程序实现弹出层效果
May 26 #Javascript
微信小程序实现预览图片功能
Oct 22 #Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 #Javascript
You might like
PHP 存储文本换行实现方法
2010/01/05 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
jQuery 1.0.2
2006/10/11 Javascript
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
python去掉行尾的换行符方法
2017/01/04 Python
使用python实现链表操作
2018/01/26 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
Python for i in range ()用法详解
2020/09/18 Python
Python Selenium参数配置方法解析
2020/01/19 Python
浅谈Python中的字符串
2020/06/10 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
如何利用find命令查找文件
2016/11/18 面试题
司机岗位职责说明书
2014/07/29 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
支行行长岗位职责
2015/02/15 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
护理自荐信
2019/05/14 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers