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

前端之家收集整理的这篇文章主要介绍了微信小程序复选框实现 多选一功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

功能实现界面

data: {
    checkBoxItems: [
      { name: @H_403_10@'全天(1-8节)',value: 'allday' },{ name: @H_403_10@'上午(1-4节)',value: 'am'403_10@'下午(5-8节)',value: 'pm'403_10@'晚上(晚自习)',value: 'night'403_10@

 

 

想要实现的功能

 

四个复选框中只能选一个,且选中另一个会取消其余选中,且能保存选择的value值

JS代码实现

checkBoxChange: function@H_403_10@ (e) {
    @H_403_10@var@H_403_10@ that = this@H_403_10@;
    let checkBoxValues@H_403_10@=null@H_403_10@;
    let checkBoxItems @H_403_10@= this@H_403_10@.data.checkBoxItems,values = e.detail.value
    @H_403_10@for@H_403_10@ (var@H_403_10@ i = 0,lenI = checkBoxItems.length; i < lenI; ++i) {
      @H_403_10@if@H_403_10@(checkBoxItems[i].value==values[values.length-1]){
        checkBoxItems[i].checked@H_403_10@=true@H_403_10@;
        checkBoxValues @H_403_10@= checkBoxItems[i].value;
      }
      @H_403_10@else@H_403_10@{
        checkBoxItems[i].checked @H_403_10@= false@H_403_10@;
      }
    }
    console.log(checkBoxValues)
    that.setData({ checkBoxItems,checkBoxValues })
  }@H_403_10@

 

 

前端代码

 

<@H_403_10@view @H_403_10@@H_502_98@class@H_403_10@="weui-cells weui-cells_after-title"@H_403_10@>@H_403_10@
      checkBox-group @H_403_10@@H_502_98@="weui-flex"@H_403_10@@H_502_98@ bindchange@H_403_10@="checkBoxChange"@H_403_10@>@H_403_10@
        label @H_403_10@@H_502_98@="weui-cell weui-check__label weui-flex__item"@H_403_10@@H_502_98@ wx:for@H_403_10@="{{checkBoxItems}}"@H_403_10@@H_502_98@ wx:key@H_403_10@="value"@H_403_10@>@H_403_10@
          checkBox @H_403_10@@H_502_98@="weui-check"@H_403_10@@H_502_98@ value@H_403_10@="{{item.value}}"@H_403_10@@H_502_98@ checked@H_403_10@="{{item.checked}}"@H_403_10@ />@H_403_10@
          ="weui-cell__hd weui-check__hd_in-checkBox"@H_403_10@>@H_403_10@
            icon @H_403_10@@H_502_98@="weui-icon-checkBox_circle"@H_403_10@@H_502_98@ type@H_403_10@="circle"@H_403_10@@H_502_98@ size@H_403_10@="23"@H_403_10@@H_502_98@ wx:if@H_403_10@="{{!item.checked}}"@H_403_10@></@H_403_10@icon@H_403_10@="weui-icon-checkBox_success"@H_403_10@@H_502_98@="success"@H_403_10@@H_502_98@="{{item.checked}}"@H_403_10@</@H_403_10@view@H_403_10@="weui-cell__bd"@H_403_10@>@H_403_10@{{item.name}}label@H_403_10@checkBox-group@H_403_10@>@H_403_10@
    >@H_403_10@

 

 

 

对应的CSS样式是

WeUI

 

猜你在找的微信小程序相关文章