在uniapp和taro中,分别用两种不同的方法实现单选全选。

在uniapp中。

首先加上checkbox标签,checkbox标签外包裹checkbox-group标签,checkbox-group标签上有@change属性,可以触发change事件,可以获取value的值。

<view class="cartlist">
        <checkbox-group @change="allselected">
          <checkbox :checked="allchecked" />全选
        </checkbox-group>
        <view class="cartitem" v-for="(item, index) of cartlist" :key="index">
          <checkbox-group @change="selected(item)">
            <checkbox :checked="item.flag" />
          </checkbox-group>
          {{ item.proname }}{{ item.price }} -- {{ item.num }}
          <text @click="reduce(item)">[-]</text> 
          <text @click="add(item)">[+]</text> 
          <text @click="del(item, index)">[del]</text> 
        </view>
      </view>

然后我们先做全选,先定义一个allselected全选事件,并在data中定义一个标识 allchecked: true。通过取反来改变选中状态,然后通过allchecked的布尔值来个遍历的列表赋予一个flag标识,来确定是否子选项是否选中。

      allselected () {
        this.allchecked = !this.allchecked
        if (this.allchecked) {
          this.cartlist.map( item => {
            item.flag = true
          })
        } else {
          this.cartlist.map( item => {
            item.flag = false
          })
        }
      }

然后单选,首先传递一个item参数,参数中有当前单选的flag标识。通过flag来判断当前项是否被选中,然后通过遍历列表,来判断是否所以的flag都为true或者都为false,以此来个allchecked赋值。

      selected (item) {
        item.flag = !item.flag
        if(!item.flag) {
          this.allchecked = false
        } else {
          const test = this.cartlist.every(item => {
            return item.flag === true
          })
          if (test) {
            this.allchecked = true
          } else {
            this.allchecked = false
          }
        }
      }

在taro中。

一样用checkboxgroup标签,标签内有onChange属性,可以写时间。
首先写全选,在onChange事件中,有一个event参数,参数中的event.detail.value标示选中状态下checkbox中value属性的值所组成的数组,我们通过判断这个数字的长度来判读,checkbox是否被选中,如果选中,我们就用map函数遍历我们的列表,把其中表示checkbox选中状态的属性都改未true,反之则相反。

<CheckboxGroup onChange={
   (event) => {
     let len = event.detail.value.length
     let flag = len === 1 ? true : false
     let list = this.state.cartlist
     list.map(item => {
       flag ? item.flag = true : item.flag = false
     })
     this.setState({
       allSelected: flag,
       cartlist: list
     })
   }
 }>
   <Checkbox checked={ this.state.allSelected } />全选
 </CheckboxGroup>

然后是单选,还是通过event.detail.value数组的长度来判断,当前选项是否点击选中,如果是,就利用index设置当前这项的falg标识为true,并用every函数,判断列表中所有项的标识是否都为true,是,则设置allchecked的标识为true,反之,亦然。

<CheckboxGroup onChange={
      (event) => {
        let len = event.detail.value.length
        let flag = len === 1 ? true : false
        let list = this.state.cartlist
        if (flag === true) {
          list[index].flag = true
          let test = list.every(val => {
            return val.flag === true
          })
          if (test) {
            this.setState({
              allSelected: true,
              cartlist: list
            }, () => {
              this.count()
            })
          } else {
            this.setState({
              allSelected: false,
              cartlist: list
            }, () => {
              this.count()
            })
          }
        } else {
          list[index].flag = false
          this.setState({
            allSelected: false,
            cartlist: list
          }, () => {
            this.count()
          })
        }
      }
    }>
      <Checkbox checked={item.flag}/>
    </CheckboxGroup>

最后,在逆战中求生存,抗击疫情,我们为武汉加油,为中国加油。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值