微信小程序--单选按钮以及多选按钮列表

微信小程序–单选按钮以及多选按钮列表

html

<view wx:if="{{listInfo.length>0 && tag !=1}}" class="marB20 paddL30 paddB30 paddT30 paddR30 boxSing wid95 bgfff marL20 marR20 boRadius10 flexz marT20 " wx:for="{{listInfo}}" wx:key="index">
  <view class="wid90 fontz28 marT10">
    {{item.itemName}} <text class="fontWeightB colorCF2B36 paddL20">¥{{item.price}}</text>
  </view>
  <view class="img40 marT10 marL20">
    <image class="imgz" src="{{item.isCheck?'/images/yuan2.png':'/images/yuan1.png'}}" data-presno="{{item.presNo}}" data-itemcode="{{item.itemCode}}" data-itemname="{{item.itemName}}" data-price="{{item.price}}" bindtap="choseBtn"></image>
  </view>
  <view></view>
</view>

js页面

//获取选中的数据
  getChose() {
    let v = this.data;
    let inspectInfo = v.inspectInfo, listInfo = v.listInfo;
    listInfo.filter((item) => {
      inspectInfo.forEach(its => {
        if (its.itemCode == item.itemCode) {
          item.isCheck = true;
        }
      })
    })
    this.setData({
      listInfo,
      choseList: inspectInfo
    })
  },
  
// 多选
  choseBtn: untils.throttle(function (e) {
    let v = e.currentTarget.dataset, itemCode = v.itemcode,presNo = v.presno,t = this.data, listInfo = t.listInfo;
    let choseList = t.choseList, choseArr = t.choseArr;

    let abj = { //转变成对象
      itemCode: itemCode,
      itemName: v.itemname,
      price: v.price,
      presNo:presNo
    };

    listInfo.forEach((item, i) => {
      if (itemCode == item.itemCode) {
        item.isCheck = !item.isCheck
        if (item.isCheck) { //选中后 true添加数据
          choseList = choseList.concat(abj);
        } else { //取消后 删除数据
          choseList.splice(listInfo.indexOf(item.itemCode), 1)
        }

      }
    });


    this.setData({
      listInfo: listInfo,
      choseArr,
      choseList
    })
  }),

在这里插入图片描述
单选

// 选中挂号时间
  choseBtn(e) {
    let v = e.currentTarget.dataset, sourceId = v.sourceid, t = this.data, listInfo = t.listInfo,availableSourceNum=v.avanum;
    listInfo.forEach((item, i) => {
      if (item.sourceId == sourceId) {
        if (item.isCheck) return item.isCheck = false, this.setData({ sourceId: '',dataTime:''})
        item.isCheck = true; 
        this.setData({
          sourceId: item.sourceId,
          dataTime:item.star +'-'+item.end
        })
      } else {
        item.isCheck = false
      }
    });
    this.setData({
      listInfo: listInfo,
      availableSourceNum:availableSourceNum
    })
  },

在这里插入图片描述

微信小程序中可以通过使用组件来实现单选、多选和全选功能。 单选: 可以使用radio组件来实现单选功能。radio组件需要与radio-group组件配合使用。当用户点击其中一个radio后,radio-group会自动将其它的radio选项取消选中。 多选: 可以使用checkbox组件来实现多选功能。checkbox组件需要与checkbox-group组件配合使用。当用户点击某个checkbox时,checkbox-group会自动将其它的checkbox选项保持原有状态。 全选: 可以使用checkbox组件来实现全选功能。需要在checkbox组件中加入一个value属性,并将其绑定到全选按钮的checked属性上。当用户点击全选按钮时,将全选按钮的状态传递给所有的checkbox选项即可。 示例代码: 单选: ``` <radio-group> <label wx:for="{{list}}" wx:key="{{index}}"> <radio value="{{item.value}}">{{item.name}}</radio> </label> </radio-group> ``` 多选: ``` <checkbox-group> <label wx:for="{{list}}" wx:key="{{index}}"> <checkbox value="{{item.value}}">{{item.name}}</checkbox> </label> </checkbox-group> ``` 全选: ``` <checkbox value="all" checked="{{allChecked}}" bindchange="onAllChange">全选</checkbox> <checkbox-group> <label wx:for="{{list}}" wx:key="{{index}}"> <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox> </label> </checkbox-group> ``` 其中,allChecked和item.checked为数据中的属性,需要在js文件中定义和更新。onAllChange为全选按钮的change事件处理函数,代码如下: ``` onAllChange: function (e) { const isChecked = e.detail.value.length > 0; const list = this.data.list.map(item => { item.checked = isChecked; return item; }); this.setData({ allChecked: isChecked, list }); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值