多规格选择样式/问卷调查选择（小程序）

第一次写博客，是直接写还是，走流程？

没人告诉我，那我就直接切入主题好了。

今天一个小伙伴问我：那个问卷调查题目选中状态显示怎么做？

我整理了一下，感觉这个挺实用，然后想着和大家分享一下！

对对，就是下面这种：

 

注意了，直接贴代码了！

<view>
  <block wx:for="{{brandItems}}" wx:key="id">
    <view class="brand">
      <text style="margin-left: 18rpx;">{{item.brand_id}}. {{item.brand_name}}</text>
      <view class="brand_row">
        <view wx:for="{{item.brand_List}}" wx:for-item="brand" class="brand_items {{brand.checked ? 'active' : ''}}" data-brandname="{{item.brand_name}}" data-value="{{brand.value}}" bindtap="checkOrUcheck" data-id="{{item.brand_id}}">{{brand.value}}</view>
      </view>
    </view>
  </block>
</view>

 brandItems: [{
        brand_id: 1,
        brand_name: "水",
        brand_List: [{
          value: "天山泉水",
          checked: false
        }, {
          value: "深井水",
          checked: false
        }, {
          value: "矿泉水",
          checked: false
        }, {
          value: "白开水",
          checked: false
        }]

      },
      {
        brand_id: 2,
        brand_name: "雷",
        brand_List: [{
          value: "球形闪电",
          checked: false
        }, {
          value: "落雷",
          checked: false
        }, {
          value: "九霄神雷",
          checked: false
        }, {
          value: "五彩劫雷",
          checked: false
        }]
      },
      {
        brand_id: 3,
        brand_name: "木",
        brand_List: [{
          value: "太乙青木",
          checked: false
        }, {
          value: "阴沉木",
          checked: false
        }, {
          value: "金丝楠木",
          checked: false
        }, {
          value: "木讷",
          checked: false
        }]
      },
      {
        brand_id: 4,
        brand_name: "金",
        brand_List: [{
          value: "沉银",
          checked: false
        }, {
            value: "千年陨铁",
          checked: false
        }, {
            value: "深潭寒铁",
          checked: false
        }, {
            value: "钢铁",
          checked: false
        }]
      },
      {
        brand_id: 5,
        brand_name: "火",
        brand_List: [{
          value: "虚无吞炎",
          checked: false
        }, {
            value: "青莲鬼火",
          checked: false
        }, {
            value: "佛怒火莲",
          checked: false
        }, {
            value: "炎姬",
          checked: false
        }]
      },
      {
        brand_id: 6,
        brand_name: "土",
        brand_List: [{
          value: "魂肉",
          checked: false
        }, {
          value: "五色土",
          checked: false
        }]
      }
    ],


checkOrUcheck: function(e) {
    let that = this;
    let brandName = e.currentTarget.dataset.brandname;
    let value = e.currentTarget.dataset.value;
    let oldBrandItems = that.data.brandItems;
    for (let i = 0; i < oldBrandItems.length; i++) {
      if (oldBrandItems[i].brand_name === brandName) {
        for (let j = 0; j < oldBrandItems[i].brand_List.length; j++) {
          if (oldBrandItems[i].brand_List[j].value==value) {
            if (oldBrandItems[i].brand_List[j].checked) {
              oldBrandItems[i].brand_List[j].checked = false
            } else {
              oldBrandItems[i].brand_List[j].checked = true
            }
          } else {
            //注意：下面这句话，注释了就是多选/不注释就是单选
            oldBrandItems[i].brand_List[j].checked = false
          }
        }
      }

    }
    that.setData({
      brandItems: oldBrandItems
    })
  },

.brand{
  height: 142rpx;
  font-size: 30rpx;
  padding-top: 18rpx;
  border-bottom: 2rpx solid #dedede;
}

.brand_row{
display: flex;
flex-direction: row;
}

.brand_items{
  display:flex;
  margin-left: 18rpx;
  margin-top: 18rpx;
  margin-bottom: 18rpx;
  width:161rpx;
  height:54rpx;
  font-size: 30rpx;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
  border:2rpx solid gray;
}

.brand_items.active{ 
background:#e21020; 
color:#fff; 
} 

.check{
  display:flex;
  align-items: center;
  justify-content: center;
  color:gray;
  font-size: 34rpx;
  font-weight: 700;
  width:335rpx;
  height:80rpx;
  position: fixed;
  margin-left: 18rpx;
  margin-right: 18rpx;
  margin-top: 30rpx;
  bottom: 30rpx;
  border-radius: 10rpx;
  border:2rpx solid gray;
}

.navigator-hover {
  color: #e21020;
}

好了，代码贴完了！

ps：刚学的时候在这找的案例源码都是不全的，对于小白来说特别不友好，所以，我的代码会很全很全很全.....

有兴趣的小伙伴可以加qq群一起交流，qq群：635248448