用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
目前可以绑定的控件有：<button>, <checkbox>, <radio>, <switch>。

属性说明

属性名 类型 说明
for String 绑定控件的 id

注：

  • app-nvue平台 暂不支持for属性

    示例

    查看演示
    以下示例代码，来自于hello uni-app项目，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。
    1. <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
    2. <template>
    3.   <view>
    4.       <view class="uni-common-mt">
    5.           <view class="uni-form-item uni-column">
    6.               <view class="title">表单组件在label内</view>
    7.               <checkbox-group class="uni-list" @change="checkboxChange">
    8.                   <label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name">
    9.                       <view>
    10.                           <checkbox :value="item.name" :checked="item.checked"></checkbox>
    11.                       </view>
    12.                       <view>{{item.value}}</view>
    13.                   </label>
    14.               </checkbox-group>
    15.           </view>
    16.           <view class="uni-form-item uni-column">
    17.               <view class="title">label用for标识表单组件</view>
    18.               <radio-group class="uni-list" @change="radioChange">
    19.                   <label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
    20.                       <view>
    21.                           <radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
    22.                       </view>
    23.                       <view>
    24.                           <label class="label-2-text" :for="item.name">
    25.                               <text>{{item.value}}</text>
    26.                           </label>
    27.                       </view>
    28.                   </label>
    29.               </radio-group>
    30.           </view>
    31.           <view class="uni-form-item uni-column">
    32.               <view class="title">label内有多个时选中第一个</view>
    33.               <checkbox-group class="uni-list" @change="checkboxChange">
    34.                   <label class="label-3">
    35.                       <view class="uni-list-cell uni-list-cell-pd">
    36.                           <checkbox class="checkbox-3">选项一</checkbox>
    37.                       </view>
    38.                       <view class="uni-list-cell uni-list-cell-pd">
    39.                           <checkbox class="checkbox-3">选项二</checkbox>
    40.                       </view>
    41.                       <view class="uni-link uni-center" style="margin-top:20rpx;">点击该label下的文字默认选中第一个checkbox</view>
    42.                   </label>
    43.               </checkbox-group>
    44.           </view>
    45.       </view>
    46.   </view>
    47. </template>
    1. export default {
    2.   data() {
    3.       return {
    4.           checkboxItems: [{
    5.                   name: 'USA',
    6.                   value: '美国'
    7.               },
    8.               {
    9.                   name: 'CHN',
    10.                   value: '中国',
    11.                   checked: 'true'
    12.               }
    13.           ],
    14.           radioItems: [{
    15.                   name: 'USA',
    16.                   value: '美国'
    17.               },
    18.               {
    19.                   name: 'CHN',
    20.                   value: '中国',
    21.                   checked: 'true'
    22.               }
    23.           ],
    24.           hidden: false
    25.       }
    26.   },
    27.   methods: {
    28.       checkboxChange: function(e) {
    29.           console.log(e)
    30.           var checked = e.target.value
    31.           var changed = {}
    32.           for (var i = 0; i < this.checkboxItems.length; i++) {
    33.               if (checked.indexOf(this.checkboxItems[i].name) !== -1) {
    34.                   changed['checkboxItems[' + i + '].checked'] = true
    35.               } else {
    36.                   changed['checkboxItems[' + i + '].checked'] = false
    37.               }
    38.           }
    39.       },
    40.       radioChange: function(e) {
    41.           var checked = e.target.value
    42.           var changed = {}
    43.           for (var i = 0; i < this.radioItems.length; i++) {
    44.               if (checked.indexOf(this.radioItems[i].name) !== -1) {
    45.                   changed['radioItems[' + i + '].checked'] = true
    46.               } else {
    47.                   changed['radioItems[' + i + '].checked'] = false
    48.               }
    49.           }
    50.       }
    51.   }
    52. }
    label - 图1