[wechat applet] label (86/100)

Function description

To improve the usability of form components .

Use for Attribute found corresponding id, Or put the control under the label , When clicked , Will trigger the corresponding control . for Priority over internal controls , Trigger the first control by default when there are multiple controls inside . At present, there are ：button, checkbox, radio, switch, input.

UI Layout ：

<!--pages/label/label.wxml-->
<view class="page-section-title"> The form component is in label Inside </view>
<checkbox-group class="group" bindchange="checkboxChange">
  <view class="label-1" wx:for="{
    {checkboxItems}}">
    <label>
      <checkbox value="{
    {item.name}}" checked="{
    {item.checked}}"></checkbox>
      <text class="label-1-text">{
    {
    item.value}}</text>
    </label>
  </view>
</checkbox-group>

<view class="page-section-title">label use for Identify form components </view>
<radio-group class="group" bindchange="radioChange">
  <view class="label-2" wx:for="{
    {radioItems}}">
    <radio id="{
    {item.name}}" value="{
    {item.name}}" checked="{
    {item.checked}}"></radio>
    <label class="label-2-text" for="{
    {item.name}}"><text>{
    {
    item.name}}</text></label>
  </view>
</radio-group>

<view class="page-section-title">label Select the first one when there are multiple </view>
<label class="label-3">
        <checkbox class="checkbox-3"> Option one </checkbox>
        <checkbox class="checkbox-3"> Option 2 </checkbox>
        <view class="label-3-text"> Click this label The first one is selected by default for the text under checkbox</view>
      </label>

style ：

/* pages/label/label.wxss */
.label-1, .label-2{
    
  margin: 30rpx 0;
}
.label-3-text{
    
  color: #576B95;
  font-size: 28rpx;
}
.checkbox-3{
    
  display: block;
  margin: 30rpx 0;
}

Data model & control

// pages/label/label.js
Page({
    

  /** *  Initial data of the page  */
  data: {
    
    checkboxItems: [
      {
    name: 'USA', value: ' The United States '},
      {
    name: 'CHN', value: ' China ', checked: 'true'}
    ],
    radioItems: [
      {
    name: 'USA', value: ' The United States '},
      {
    name: 'CHN', value: ' China ', checked: 'true'}
    ],
    hidden: false
  },
  checkboxChange(e) {
    
    const checked = e.detail.value
    const changed = {
    }
    for (let i = 0; i < this.data.checkboxItems.length; i++) {
    
      if (checked.indexOf(this.data.checkboxItems[i].name) !== -1) {
    
        changed['checkboxItems[' + i + '].checked'] = true
      } else {
    
        changed['checkboxItems[' + i + '].checked'] = false
      }
    }
    this.setData(changed)
  },
  radioChange(e) {
    
    const checked = e.detail.value
    const changed = {
    }
    for (let i = 0; i < this.data.radioItems.length; i++) {
    
      if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
    
        changed['radioItems[' + i + '].checked'] = true
      } else {
    
        changed['radioItems[' + i + '].checked'] = false
      }
    }
    this.setData(changed)
  },

  tapEvent() {
    
    console.log(' Button clicked ')
  },
  /** *  Life cycle function -- Monitor page loading  */
  onLoad(options) {
    

  },

Attribute specification
attribute type The default value is Required explain Minimum version
for string no Bound to control id 1.0.0