微信小程序组件——多选框checkbox和标签label

通过使用Label组件中for属性，指向checkbox的id，当点击label文字时，就会选中对应id的checkbox。
checkbox-group常用属性：
bindchange=“bindchange”：当点击或者取消了选中，都会触发该bindchange函数，
并且会将选中checkbox的value值传递，可在js中通过e.detail.value获取。
color=“red” ：选中框内的对号为红色。

html代码：

<view>
  <checkbox-group class="all" bindchange="bindchange">
    <checkbox value="apple" checked>
      <label for="apple">苹果</label>
    </checkbox>
    <checkbox value="pear">
      <label for="pear">
        梨子
      </label>
    </checkbox>
    <checkbox value="banana" color="red">
      <label for="banana">香蕉</label>
    </checkbox>
  </checkbox-group>
</view>

css代码：使用flex竖向布局，使checkbox竖着排列

.all{
  display: flex;
  flex-direction: column;
}

js代码：

Page({
  bindchange(e){
    console.log(e.detail.value);
  }
})

结果：

控制台输出：