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

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

功能实现界面

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

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

时间: 2020-02-13

微信小程序实现下拉框功能

微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果 下面来看一下代码: 首先WXML <view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{selectData[index]}}</text> <image class='select_img {{show&&&q

微信小程序实现多选框全选与取消全选功能示例

本文实例讲述了微信小程序实现多选框全选与取消全选功能.分享给大家供大家参考,具体如下: js部分: page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",text: "text2",typ: "type2",}, {code: "11

微信小程序使用input组件实现密码框功能【附源码下载】

本文实例讲述了微信小程序使用input组件实现密码框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view style="width:80%; display:flex;"> <view>用户名:</view> <input style="border: 1px solid;border-color: lightblue;width:60%;" placeholder="

微信小程序按钮去除边框线分享页面功能

有一个需求是分享当前页面,使用美工的分享按钮图片来分享,而小程序分享功能只有button有 open-type="share"这个属性,使用image标签肯定不行.我是这样做的: <button open-type="share" style="height:85rpx;width:215rpx;padding:0;background-color:#fff;border-color:#fff;margin-right:10rpx" >

微信小程序使用picker实现时间和日期选择框功能【附源码下载】

本文实例讲述了微信小程序使用picker实现时间和日期选择框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <picker value="{{picker1Value}}" range="{{picker1Range}}" bindchange="normalPickerBindchange"> 当前城市选择:{{picker1Range[picker1Value]}} </pick

微信小程序下拉框功能的实例代码

微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image src='/images/icon/do

微信小程序分享功能之按钮button 边框隐藏和点击隐藏

先上图 样式设置: 在小程序社区看了下,说是伪类造成的.于是就重新定义下样式.然后就 ok 了. 总结 以上所述是小编给大家介绍的微信小程序分享功能之按钮button 边框隐藏和点击隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

微信小程序下拉框搜索功能的实现方法

最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个. 首先看下效果图: 左边是输入框,可以进行模糊查询,右边图标进行选择. 代码部分,我定义了五个参数,和一个自定义的方法, list:下拉框数组, _width:组件宽度, _height:组件高度, bind:action: 自定义方法 考虑到每个人用的时候用的对象数组结构不同我预留了两个字段,做自定义(可不写),怎么样是不是很强大. actualvalue:下拉框实际值, showvalue:下拉框显示值

微信小程序6位或多位验证码密码输入框功能的实现代码

在做小程序过程中做一个6位验证码输入框,本以为很简单,但是在写的时候遇到各种各样的阻力,在网上查阅资料也寥寥无几,后来经过一番思考,终于敲定下来本人最满意的方案,特意发出来让大家参考一下,希望能帮到大家! 一.效果图如下: 二.代码部分 wxml: <form bindsubmit="formSubmit"> <view class='content'> <block wx:for="{{Length}}" wx:key="i

微信小程序自定义底部导航带跳转功能

本文实例为大家分享了微信小程序实现底部导航带跳转功能的具体代码,供大家参考,具体内容如下 index.wxml <!--底部导航 --> <view class='footer'> <view class='footer_list' data-id='{{index}}' catchtap='Navigation' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="t

微信小程序实现多选删除列表数据功能示例

本文实例讲述了微信小程序实现多选删除列表数据功能.分享给大家供大家参考,具体如下: 实现小程序一个类似多选列表删除的功能 <!-- 错题本 --> <view class="contarner"> <view class="content"> <view class="title flex-def flex-cCenter flex-zBetween"> <view>错题本(<te

微信小程序自定义select下拉选项框组件的实现代码

知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了. 第一步:创建组件所需的文件 我喜欢把共用的内容都放在和pages文件同级的地方,所以有了下面的目录结构 (1) 先创建一个自定义名字的文件夹,例如我上面的Componet (2) 再创建一个select文件夹,然后:右键这个文件

微信小程序学习笔记之本地数据缓存功能详解

本文实例讲述了微信小程序学习笔记之本地数据缓存功能.分享给大家供大家参考,具体如下: 前面介绍了微信小程序获取位置信息操作.这里再来介绍一下微信小程序的本地数据缓存功能. [将数据存储在本地缓存]wx.setStorage [读取本地缓存]wx.getStorage 以手机号+密码登录为例,把登录成功返回的token值存储在本地缓存中,然后读取缓存中的token: login.php: <?php header("Content-type:text/html;charset=utf-8&q

微信小程序中实现一对多发消息详解及实例代码

微信小程序中实现一对多发消息详解及实例代码 微信小程序中各个界面之间的传值和通知比较蛋疼.所以模仿了iOS中的通知中心,在微信小程序中写了一套类似的通知中心. 通知中心可以做到:1对多发消息,传递object.使用十分简洁. 使用时,在需要接收消息的界面注册一个通知名.然后在需要发消息的界面post这个通知名就可以了.可以在多个界面注册同一个通知名.这样就可以1对多发消息. 使用方法: 1:在app.js中引用notification.js var notificationCenter = re

微信小程序实现action-sheet弹出底部菜单功能【附源码下载】

本文实例讲述了微信小程序实现action-sheet弹出底部菜单功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange=&qu

微信小程序使用progress组件实现显示进度功能【附源码下载】

本文实例讲述了微信小程序使用progress组件实现显示进度功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 复制代码 代码如下: <progress percent="100" color="blue" stroke-width="20" show-info active/> progress组件属性说明如下: 感兴趣的朋友可以逐一尝试上述属性设置的具体用法. 3.源代码点击此处本站下载. 关

微信小程序中添加客服按钮contact-button功能

小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能. 1. 普通客服按钮添加 <button open-type='contact' session-from=''>客服-联系我们</button> 2. 悬浮客服按钮添加,图片自定义 大家看地图的有个客服图片图片资源.大家去iconfont 网站去找一个就可以了 index.wxml <button class="kf_button" open-type=&q