微信小程序官方组件展示之表单组件checkbox源码

转载

软件事业部 2022-08-23 11:24:12 博主文章分类：微信小程序官方组件展示

文章标签 微信小程序小程序小程序开发小程序源码小程序定制开发 文章分类 微信开发移动开发

以下将展示微信小程序之表单组件checkbox源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。

功能描述：

多选项目。

属性说明：

微信小程序官方组件展示之表单组件checkbox源码_小程序源码

示例代码：

JAVASCRIPT：

Page({
  onShareAppMessage() {
    return {
      title: 'checkbox',
      path:
'page/component/pages/checkbox/checkbox'
    }
  },
 
  data: {
    items: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'FRA', name: '法国'}
    ]
  },
 
  checkboxChange(e) {
    console.log('checkbox发生change事件，携带value值为：', 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
    })
  }
})

WXML：

<view
class="container">
  <view class="page-body">
    <view class="page-section
page-section-gap">
      <view
class="page-section-title">默认样式</view>
      <label class="checkbox">
        <checkbox value="cb"
checked="true"/>选中
      </label>
      <label class="checkbox">
        <checkbox value="cb" />未选中
      </label>
    </view>
  
    <view class="page-section">
      <view
class="page-section-title">推荐展示样式</view>
      <view class="weui-cells
weui-cells_after-title">
        <checkbox-group
bindchange="checkboxChange">
          <label class="weui-cell
weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
            <view
class="weui-cell__hd">
              <checkbox
value="{{item.value}}" checked="{{item.checked}}"/>
            </view>
            <view
class="weui-cell__bd">{{item.name}}</view>
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>
  
</view>