小程序实现单选多选功能


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 相关文章推荐
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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
数据库中排序的对比及使用条件详解
2012/02/23 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
python网络编程实例简析
2014/09/26 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
分公司负责人任命书
2014/06/04 职场文书
python 网络编程要点总结
2021/06/18 Python
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL