Detailed example code of checkbox component of WeChat applet-Mini Program Development-php.cn

Detailed example code of checkbox component of WeChat applet

高洛峰

Release： 2018-05-10 15:41:17

Original

2420 people have browsed it

This article mainly introduces the detailed explanation and simple examples of the checkbox component of the WeChat applet. Friends in need can refer to the

implementation renderings:

Detailed example code of checkbox component of WeChat applet

checkbox-group

Multi-select item group, internally composed of multiple checkbox.

checkbox-group can only contain checkbox

Attribute name	Type	Default value	Description
bindchange	EventHandle		The selected item in checkbox-group changes Trigger the change event, detail = {value:[array of value of the selected checkbox]}

checkbox

Multi-select items.

Attribute name	Type	Default value	Description
value	String		checkbox identifier, triggers the change event of checkbox-group when selected, and carries the checkbox value
disabled	Boolean	false	Whether it is disabled
checked	Boolean	false	Whether it is currently selected or not, can be used to set the default selection

Example:

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

Copy after login

Page({
 data: {
 items: [
 {name: &#39;USA&#39;, value: &#39;美国&#39;},
 {name: &#39;CHN&#39;, value: &#39;中国&#39;, checked: &#39;true&#39;},
 {name: &#39;BRA&#39;, value: &#39;巴西&#39;},
 {name: &#39;JPN&#39;, value: &#39;日本&#39;},
 {name: &#39;ENG&#39;, value: &#39;英国&#39;},
 {name: &#39;TUR&#39;, value: &#39;法国&#39;},
 ]
 },
 checkboxChange: function(e) {
 console.log(&#39;checkbox发生change事件，携带value值为：&#39;, e.detail.value)
 }
})

Copy after login

Thanks for reading, I hope it can help everyone, thank you for your support of this site!

The above is the detailed content of Detailed example code of checkbox component of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!