微信小程序复选框实现多选一功能过程解析


Posted in Javascript onFebruary 14, 2020

这篇文章主要介绍了微信小程序复选框实现多选一功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

功能实现界面

微信小程序复选框实现多选一功能过程解析

data: {
  checkboxItems: [
   { name: '全天(1-8节)', value: 'allday' },
   { name: '上午(1-4节)', value: 'am' },
   { name: '下午(5-8节)', value: 'pm' },
   { name: '晚上(晚自习)', value: 'night' },
  ]
 }

想要实现的功能

四个复选框中只能选一个,且选中另一个会取消其余选中,且能保存选择的value值

JS代码实现

checkboxChange: function (e) {
  var that = this;
  let checkboxValues=null;
  let checkboxItems = this.data.checkboxItems, values = e.detail.value
  for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
   if(checkboxItems[i].value==values[values.length-1]){
    checkboxItems[i].checked=true;
    checkboxValues = checkboxItems[i].value;
   }
   else{
    checkboxItems[i].checked = false;
   }
  }
  console.log(checkboxValues)
  that.setData({ checkboxItems, checkboxValues })
 }

前端代码

<view class="weui-cells weui-cells_after-title">
   <checkbox-group class="weui-flex" bindchange="checkboxChange">
    <label class="weui-cell weui-check__label weui-flex__item" wx:for="{{checkboxItems}}" wx:key="value">
     <checkbox class="weui-check" value="{{item.value}}" checked="{{item.checked}}" />
     <view class="weui-cell__hd weui-check__hd_in-checkbox">
      <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
      <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{item.checked}}"></icon>
     </view>
     <view class="weui-cell__bd">{{item.name}}</view>
    </label>
   </checkbox-group>
  </view>

对应的CSS样式是

WeUI

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

Javascript 相关文章推荐
jQuery登陆判断简单实现代码
Apr 21 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 #Javascript
node事件循环和process模块实例分析
Feb 14 #Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 #Javascript
JavaScript简单编程实例学习
Feb 14 #Javascript
JS实现打砖块游戏
Feb 14 #Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 #Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
python创建和删除目录的方法
2015/04/29 Python
python实现批量改文件名称的方法
2015/05/25 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
python模块导入的细节详解
2018/12/10 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
广州地球村科技数据库题目
2016/04/25 面试题
应届行政管理专业个人自我评价
2013/12/28 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
土地租赁协议书
2015/01/29 职场文书
员工担保书范本
2015/09/22 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL