All Products
Search
Document Center

AMCheckBox

Last Updated: Feb 04, 2021

This section describes AMCheckBox, a checkbox.

Property Description Type Default value Mandatory
value The component value, which is the value carried by the change event when the component is selected. String - false
checked Whether the current item is selected. You can use this attribute to set the item as selected by default. Boolean false false
disabled Whether to disable the button. Boolean false false
onChange Callback function triggered by the change event. (e: Object) => void - false
id Used in combination with the “for” attribute of the label component. String - false

Sample code

 
  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "list": "mini-antui/es/list/index",
  5. "list-item": "mini-antui/es/list/list-item/index",
  6. "am-checkbox": "mini-antui/es/am-checkbox/index"
  7. }
  8. }
 
  1. <list>
  2. <view slot="header">
  3. List and checkbox
  4. </view>
  5. <block a:for="{{items}}">
  6. <list-item
  7. thumb=""
  8. arrow="{{false}}"
  9. index="{{index}}"
  10. key="items-{{index}}"
  11. last="{{index === (items.length - 1)}}"
  12. >
  13. <view slot="prefix" style="display: flex; align-items: center;">
  14. <am-checkbox id="{{item.id}}" data-name="{{item.value}}" disabled="{{item.disabled}}" checked="{{item.checked}}" onChange="onChange" />
  15. </view>
  16. <label for="{{item.id}}">{{item.title}}</label>
  17. </list-item>
  18. </block>
  19. </list>
  20. <view style="padding: 16px;">
  21. <view style="color: #888; font-size: 14px;">
  22. Protocol
  23. </view>
  24. <view style="margin-top: 10px;">
  25. <label style="display: flex; line-height: 24px;">
  26. <am-checkbox />
  27. <text style="text-indent: 8px; color: #888">Agree with [Credit Payment Service Contract]</text>
  28. </label>
  29. </view>
  30. </view>
  31. <view style="padding: 16px; background-color: #fff;">
  32. <form onSubmit="onSubmit" onReset="onReset">
  33. <view>
  34. <view style="color: #666; font-size: 14px; margin-bottom: 5px;">Select the frameworks you have used:</view>
  35. <view>
  36. <checkbox-group name="libs">
  37. <label a:for="{{items2}}" style="display: flex; align-items: center; height: 30px;">
  38. <am-checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
  39. <text style="color: #888; font-size: 14px; margin-left: 8px;">{{item.value}}</text>
  40. </label>
  41. </checkbox-group>
  42. </view>
  43. <view style="margin-top: 10px;">
  44. <button type="primary" size="mini" formType="submit">submit</button>
  45. </view>
  46. </view>
  47. </form>
  48. </view>
 
  1. Page({
  2. data: {
  3. items: [
  4. { checked: true, disabled: false, value: 'a', title: 'Checkbox - selected by default', id: 'checkbox1' },
  5. { checked: false, disabled: false, value: 'b', title: 'Checkbox - unselected by default', id: 'checkbox2' },
  6. { checked: true, disabled: true, value: 'c', title: 'Checkbox - disabled is selected by default', id: 'checkbox3' },
  7. { checked: false, disabled: true, value: 'd', title: 'Checkbox - disabled is unselected by default', id: 'checkbox4' },
  8. ],
  9. items2: [
  10. { name: 'react', value: 'React', checked: true },
  11. { name: 'vue', value: 'Vue.js' },
  12. { name: 'ember', value: 'Ember.js' },
  13. { name: 'backbone', value: 'Backbone.js', disabled: true },
  14. ],
  15. },
  16. onSubmit(e) {
  17. my.alert({
  18. content: `You have selected ${e.detail.value.libs.join(', ')}`,
  19. });
  20. },
  21. onReset() {},
  22. onChange(e) { console.log(e); },
  23. });