[wechat applet] checkbox (89/100)

UI Layout ：

<!--pages/CheckBox/CheckBox.wxml-->
<view class="page-section-title"> Default style </view>
<checkbox value="cb" checked="true" /> Choose 
<checkbox value="cb" /> Not selected 

<view> Recommended display style </view>
<checkbox-group bindchange="checkboxChange">
  <label  wx:for="{
    {items}}" wx:key="{
    {item.value}}">
    <view >
      <checkbox value="{
    {item.value}}" checked="{
    {item.checked}}" />
    </view>
    <view >{
    {
    item.name}}</view>
  </label>
</checkbox-group>

Data model & The controller is as follows ：

// pages/CheckBox/CheckBox.js
Page({
    

  /** *  Initial data of the page  */
  data: {
    
    items: [
      {
    value: 'BJ', name: ' Beijing '},
      {
    value: 'HeB', name: ' hebei ', checked: 'true'},
      {
    value: 'HeNan', name: ' Henan '},
      {
    value: 'HuB', name: ' hubei '},
      {
    value: 'HuNan', name: ' hunan '},
      {
    value: 'ANH', name: ' anhui '}
    ]
  },
  checkboxChange(e) {
    
    console.log('checkbox happen change event , carry value The value is ：', e.detail.value)
    const items = this.data.items
    const values = e.detail.value
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
    
      items[i].checked = false
      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
    
        if (items[i].value === values[j]) {
    
          items[i].checked = true
          break
        }
      }
    }
    this.setData({
    
      items
    })
  },
  /** *  Life cycle function -- Monitor page loading  */
  onLoad(options) {
    

  },

Function description

Multiple choice items .

Attribute specification

attribute type The default value is Required explain Minimum version
value string no checkbox identification , Trigger when selected checkbox-group Of change event , And carry checkbox Of value 1.0.0

disabled boolean false no Whether to disable 1.0.0

checked boolean false no Currently selected , Can be used to set the default selection 1.0.0

color string #09BB07 no checkbox The color of the , Same as css Of color 1.0.0