微信小程序官方組件展示之表單組件checkbox源碼
以下將展示微信小程序之表單組件checkbox源碼官方組件能力输瓜，組件樣式僅供參考窃这，開發(fā)者可根據(jù)自身需求定義組件樣式缘厢，具體屬性參數(shù)詳見小程序開發(fā)文檔萝毛。
功能描述：
多選項目楷力。
屬性說明：
示例代碼：
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發(fā)生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>
版權(quán)聲明：本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理锌奴、上傳，如涉及版權(quán)問題憾股，請聯(lián)系我們第一時間處理鹿蜀。
原文鏈接地址：https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
