微信小程序（十五）checkbox组件详细介绍

简介

checkbox是一种可以在多个选项中单独选择的组件。在微信小程序中使用checkbox组件可以方便地实现多选功能。checkbox组件的主要属性有value、checked、disabled。value代表checkbox的值，checked代表是否选中，disabled代表是否禁用。

基本用法

<checkbox-group>
  <label><checkbox value="1" checked="{{true}}"/>选项1</label>
  <label><checkbox value="2"/>选项2</label>
  <label><checkbox value="3"/>选项3</label>
</checkbox-group>

以上代码中，我们使用了checkbox-group标签来包含多个checkbox组件。每个checkbox组件都有一个value属性来表示它的值，有一个checked属性用于初始是否被选中。label标签可以使得用户点击label文本也能选择checkbox。

事件

checkbox组件有两个事件：checkbox-group组件的bindchange事件，和单个checkbox的bindtap事件。

checkbox-group的bindchange事件

当用户选择多选框的时候，会触发它所在的多选框组件的bindchange事件。可以在事件回调函数中获得最新的所有选中的checkbox的value值。

<checkbox-group bindchange="checkboxChange">
  <label><checkbox value="1" checked="{{true}}"/>选项1</label>
  <label><checkbox value="2"/>选项2</label>
  <label><checkbox value="3"/>选项3</label>
</checkbox-group>

Page({
  checkboxChange: function(e){
    console.log('选中的checkbox值为：', e.detail.value)
  }
})

checkbox的bindtap事件

当用户点击一个checkbox组件的时候，会触发该组件的bindtap事件。可以在事件回调函数中通过setData方法改变该checkbox的checked属性，从而控制是否被选中。

<checkbox-group>
  <label><checkbox value="1" checked="{{true}}" bindtap="checkboxTap"/>选项1</label>
  <label><checkbox value="2" bindtap="checkboxTap"/>选项2</label>
  <label><checkbox value="3" bindtap="checkboxTap"/>选项3</label>
</checkbox-group>

Page({
  checkboxTap: function(e){
    var index = e.currentTarget.dataset.index
    var checkbox = this.selectComponent('#checkbox-' + index)
    checkbox.setData({
      checked: !checkbox.data.checked
    })
  }
})

以上代码中，我们在每个checkbox组件上添加了一个bindtap事件，当用户点击checkbox的时候，会触发该事件，并通过selectComponent方法获取到该checkbox的实例，然后通过setData方法改变该checkbox的checked属性。需要注意的是，我们给每个checkbox组件加上了一个data-index属性，通过这个属性我们可以在事件回调函数中找到相应的checkbox实例。

示例一

下面是一个可以选择多个技能的例子：

<checkbox-group bindchange="checkboxChange">
  <label><checkbox value="JavaScript"/>JavaScript</label>
  <label><checkbox value="React"/>React</label>
  <label><checkbox value="Angular"/>Angular</label>
  <label><checkbox value="Vue"/>Vue</label>
  <label><checkbox value="Node.js"/>Node.js</label>
</checkbox-group>

Page({
  checkboxChange: function(e){
    console.log('选中的技能为：', e.detail.value)
  }
})

以上代码中，我们将所有技能以checkbox的形式展现出来，并在checkbox-group组件上绑定了一个bindchange事件，在事件回调函数中可以获得用户选择的技能值。

示例二

下面是一个可以选择多个颜色的例子：

<checkbox-group bindchange="checkboxChange">
  <label><checkbox value="red" checked="{{true}}"/>红色</label>
  <label><checkbox value="green"/>绿色</label>
  <label><checkbox value="blue"/>蓝色</label>
  <label><checkbox value="yellow"/>黄色</label>
</checkbox-group>

Page({
  checkboxChange: function(e){
    console.log('选中的颜色为：', e.detail.value)
  }
})

以上代码中，我们将所有颜色以checkbox的形式展现出来，并在checkbox-group组件上绑定了一个bindchange事件，在事件回调函数中可以获得用户选择的颜色值。