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

简介

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

基本用法

  选项1
  选项2
  选项3

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

事件

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

checkbox-group的bindchange事件

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

  选项1
  选项2
  选项3

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

checkbox的bindtap事件

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

  选项1
  选项2
  选项3

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实例。

示例一

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

  JavaScript
  React
  Angular
  Vue
  Node.js

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

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

示例二

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

  红色
  绿色
  蓝色
  黄色

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

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