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


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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
js闭包用法实例详解
Dec 13 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
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下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
JS iFrame加载慢怎么解决
2016/05/13 Javascript
Javascript之String对象详解
2016/06/08 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
python爬虫基础知识点整理
2020/06/02 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
区域总监的岗位职责
2013/11/21 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
Nginx反向代理学习实例教程
2021/10/24 Servers
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
Nginx安装配置详解
2022/06/25 Servers