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


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代码
Jan 28 Javascript
jQuery 渐变下拉菜单
Dec 15 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
JS常用正则表达式总结
Nov 12 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 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数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
jQuery 位置插件
2008/12/25 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
js同源策略详解
2015/05/21 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
致跳高运动员广播稿
2014/01/13 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
党员民主评议总结
2014/10/20 职场文书
师范生见习报告
2014/10/31 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
创业计划书之书店
2019/09/10 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript