微信小程序官方组件展示之表单组件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>

版权声明： 本站所有内容均由互联网收集整理、上传，如涉及版权问题，请联系我们第一时间处理。

原文链接地址：

checkbox | 微信开放文档