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

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

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

功能实现界面

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

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

相关文章

  • IntelliJ IDEA 安装vue开发插件的方法

    IntelliJ IDEA 安装vue开发插件的方法

    本篇文章主要介绍了IntelliJ IDEA 安装vue开发插件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • js实现计算器和计时器功能

    js实现计算器和计时器功能

    这篇文章主要为大家详细介绍了js实现计算器和计时器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 简述JS浏览器的三种弹窗

    简述JS浏览器的三种弹窗

    本文给大家简单介绍了JS浏览器的三种弹窗,简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • js 定位到某个锚点的方法

    js 定位到某个锚点的方法

    下面小编就为大家带来一篇js 定位到某个锚点的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

    鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

    下面小编就为大家带来一篇鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-12-12
  • 如何用uni-app实现顶部导航栏显示按钮和搜索框

    如何用uni-app实现顶部导航栏显示按钮和搜索框

    本文介绍了如何用uni-app实现顶部导航栏显示按钮和搜索框,感兴趣的同学,可以参考下,并且试验一下。
    2021-06-06
  • 匹配任意字符的正则表达式写法

    匹配任意字符的正则表达式写法

    今天在写一个小应用的时候遇到个问题,原本是想捕捉到页面中所有电驴地址,以便迅雷抓取。
    2010-04-04
  • TypeScript中d.ts类型声明文件的实现

    TypeScript中d.ts类型声明文件的实现

    .d.ts 文件是 TypeScript 的类型声明文件,它们的主要作用是为 JavaScript 库提供类型支持,本文主要介绍了TypeScript中d.ts类型声明文件的实现,感兴趣的可以了解一下
    2023-10-10
  • 小程序canvas手写签名适配PC实现示例详解

    小程序canvas手写签名适配PC实现示例详解

    这篇文章主要为大家介绍了小程序canvas手写签名适配PC实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 使用async await 封装 axios的方法

    使用async await 封装 axios的方法

    这篇文章主要介绍了使用async await 封装 axios的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论