Interpretation and analysis of WeChat mini program components: introduction to checkbox options

checkbox multiple optionsComponent description:

• Checkbox is a component in the mini program form component. Its function is to guide users to make choices in the form.




• To use the checkbox component, you also need to use the checkbox-group tag in addition to all checkbox tags in the same group.




• The function of the checkbox-group label is to bind the onchange event to the checkbox label, and guide the user when the user makes a choice.




• A single checkbox label will not trigger the onchange event, it will only be triggered if it is bound to the checkbox-group.

##checkbox optionComponentThe sample code runs as follows:

##The following is the WXML code:

<view>
    <checkbox-group class="checkbox-group" bindchange="changed">
        <label class="items" wx:for="{{item}}">
            <checkbox value="{{item.value}}" checked="{{item.checked}}" disabled="{{item.disabled}}"/>
            {{item.name}}
        </label>
    </checkbox-group>
</view>

The following is the JS code:

Page({
  data:{
    item: [
      {'name': '俄罗斯', 'value': 'RS', 'disabled': false},
      {'name': '美国', 'value': 'US', 'disabled': false},
      {'name': '中国', 'value': 'CN', 'disabled': false, 'checked': true},
      {'name': '英国', 'value': 'UK', 'disabled': false},
      {'name': '日本', 'value': 'JP', 'disabled': true}
    ]
  },
  changed: function(e) {
    console.info('你选择了' + e.detail.value);
  }
})

The following is the WXSS code:

.items {
    display: block;
    margin: 30rpx;
}

of checkbox multiple options Main attributes:

#checkbox-group

##Attribute name

Data type	Description	##bindchange
EventHandle	Changes in the selected item trigger the change event, detail = {value:[array of value of the selected checkbox]}

##checkbox

##Attribute name

Data typeStringBooleandisabledBoolean

Description	Default value		value
identifier, triggers the change event of when selected, and carries the value of		#checked
Whether is selected by default	false
Whether is disabled	false

The above is the detailed content of Interpretation and analysis of WeChat mini program components: introduction to checkbox options. For more information, please follow other related articles on the PHP Chinese website!