购物车，单选多选全选

js购物车，单选多选全选

演示视频 demonstration.MP4

//SCSS
.contentlist{
            width: 100;
            padding:24px 32px;

            box-sizing: border-box;
            .contentlistItem{
                padding:24px;
                background: #FFFFFF;
                border-radius: 12px;
                .itemheader{
                    display: flex;
                    .leftimg{
                        width: 32px;
                        height: 32px;
                        margin-right:16px ;
                        margin-top: 20px;
                    }
                    .itemheaderCenter{
                        flex: 1;
                        .headerCenter{
                            display: flex;
                            .centerkey{
                                width: 120px;
                                font-size: 28px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #777777;
                                line-height: 60px;
                                letter-spacing: 7px;
                            }
                            .centervalue{
                                flex: 1;
                                font-size: 28px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #333333;
                                line-height: 60px;
                            }
                        }
                    }
                    .rightimg{
                        width: 32px;
                        height: 32px;
                        margin-top:20px;
                    }
                }
            }
        }

`````` //数据
this.state = {
                tbZkGoodsModelVOS: [
                  {
                    "modelName": "B型",
                    "returnVOS": [
                      {
                        "measure": "760*690mm",
                        "pnl": 12
                      }
                    ]
                  }
                ]
            }
             componentDidMount() {
               //添加列表多选的选中状态
                this.state.tbZkGoodsModelVOS.forEach((item,index)=>{
                    item.listsel = false
                    //添加列表单选的选中状态
                    item.returnVOS.forEach((items,idx) => {
                      items.itemsel = false
                    })
                })
             }
   

```   jsx
      {
            this.state.tbZkGoodsModelVOS&&this.state.tbZkGoodsModelVOS.map((item, index) => {
              return (
                <View className='contentlist'>
                  <View className='contentlistItem'>
                    <View className='itemheader'>
                      <Image src={item.listsel ? sel : unsel} className='leftimg' onClick={() => { this.handlelistclick(item.listsel, index) }}></Image>
                      <View className='itemheaderCenter'>
                        <View className='headerCenter'>
                          <View className='centerkey'>品类:</View>
                          <View className='centervalue'>5白+15A（折）+5白双钢中空</View>
                        </View>
                        <View className='headerCenter'>
                          <View className='centerkey'>总片数:</View>
                          <View className='centervalue'>12片</View>
                        </View>
                      </View>
                      <Image src={downwardArrows} className='rightimg' onClick={() => { this.isspread(item.isspread, index) }}></Image>
                    </View>
                    {
                      item.returnVOS.map((item, indexs) => {
                        return (
                          <View className='itemheader' >
                            <Image src={item.itemsel ? sel : unsel} className='leftimg' onClick={() => { this.handleitemclick(item.itemsel,index, indexs) }}></Image>
                            <View className='itemheaderCenter'>
                              <View className='headerCenter'>
                                <View className='centerkey'>尺寸:</View>
                                <View className='centervalue'>760*690mm</View>
                              </View>
                              <View className='headerCenter'>
                                <View className='centerkey'>片数:</View>
                                <View className='centervalue'>12片</View>
                              </View>
                            </View>
                          </View>
                        )
                      })
                    }

                  </View>
                </View>
              )
            })
          }

```JS //多选
  handlelistclick = (listsel, idx) => {
    console.log(listsel,idx)
   //根据下标改变多选选中状态
    this.state.tbZkGoodsModelVOS[idx].listsel=!listsel
    //多选选中与反选对子级造成选中，反选的影响
    this.state.tbZkGoodsModelVOS[idx].returnVOS.forEach((item,index) => {
      item.itemsel = this.state.tbZkGoodsModelVOS[idx].listsel?true:false;
    })
    //  如果所有多选都符合条件返回true，否则返回 false
    var index = this.state.tbZkGoodsModelVOS.every((item) =>{ return item.listsel?true:false});
    //全选选中反选
    this.state.allsel = index?true:false
    this.setState({
      tbZkGoodsModelVOS: this.state.tbZkGoodsModelVOS
    })
  }
  //单选
  handleitemclick = (sel, idx,idxs) => {
    console.log(sel, idx,idxs)
    //根据下标改变多选选中状态
    this.state.tbZkGoodsModelVOS[idx].returnVOS[idxs].itemsel = !sel
    //  如果所有反选都符合条件返回true，否则返回 false
    var index = this.state.tbZkGoodsModelVOS[idx].returnVOS.every((item) =>{ return item.itemsel?true:false});
    //多选选中反选
    this.state.tbZkGoodsModelVOS[idx].listsel = index?true:false
    //  如果所有多选都符合条件返回true，否则返回 false
    var indexs = this.state.tbZkGoodsModelVOS.every((item) =>{ return item.listsel?true:false});
    //全选选中反选
    this.state.allsel = indexs?true:false
    console.log(index)
    this.setState({
      tbZkGoodsModelVOS: this.state.tbZkGoodsModelVOS
    })
  }
  //全选
  allsel = () => {
    //全选选中反选
    this.state.allsel = !this.state.allsel;
    this.state.tbZkGoodsModelVOS.forEach((item, index) => {
    //全选选中反选,多选对应变化
      item.listsel = this.state.allsel ? true : false;
        //多选选中反选,单选对应变化
      item.returnVOS.forEach((returnVOS, index) => {
        returnVOS.itemsel = this.state.allsel ? true : false
      })
    })
    this.setState({
      allsel: this.state.allsel,
      tbZkGoodsModelVOS: this.state.tbZkGoodsModelVOS
    })
  }