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


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 相关文章推荐
js实现文本框中焦点在最后位置
Mar 04 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 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
建立动态的WML站点(一)
2006/10/09 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
js 提交和设置表单的值
2008/12/19 Javascript
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
js opener的使用详解
2014/01/11 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
Django发送html邮件的方法
2015/05/26 Python
解析Python编程中的包结构
2015/10/25 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
pymysql模块的操作实例
2019/12/17 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
如何开启linux的ssh服务
2013/06/03 面试题
教师实习的自我鉴定
2013/10/26 职场文书
不假外出检讨书
2014/01/27 职场文书
小学教师节活动方案
2014/01/31 职场文书
员工入职担保书范文
2014/04/01 职场文书
协议书的格式
2014/04/23 职场文书
会计学毕业生求职信
2014/06/25 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
宣传委员竞选稿
2015/11/19 职场文书