在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>

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

• 点赞
• 收藏
• 分享
• • 文章举报

劉國楓 发布了1 篇原创文章 · 获赞 0 · 访问量 27 私信 关注