支付寶小程序表單組件 多選項目·Checkbox

2020-09-10 11:17 更新

多選項目。

說明:

  • checkbox 沒有源碼。
  • checkbox 不支持修改選中的背景顏色樣式。

掃碼體驗

示例代碼

  1. <!-- API-DEMO page/component/checkbox/checkbox.axml -->
  2. <view class="page">
  3. <view class="page-description">多項選擇器</view>
  4. <form onSubmit="onSubmit" onReset="onReset">
  5. <view class="page-section">
  6. <view class="page-section-title">選擇你用過的框架:</view>
  7. <view class="page-section-demo">
  8. <checkbox-group onChange="onChange" name="libs">
  9. <label class="checkbox" a:for="{{items}}" key="label-{{index}}">
  10. <checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
  11. <text class="checkbox-text">{{item.value}}</text>
  12. </label>
  13. </checkbox-group>
  14. </view>
  15. <view class="page-section-btns">
  16. <view><button type="ghost" size="mini" formType="reset">reset</button></view>
  17. <view><button type="primary" size="mini" formType="submit">submit</button></view>
  18. </view>
  19. </view>
  20. </form>
  21. </view>
  22. // API-DEMO page/component/checkbox/checkbox.js
  23. Page({
  24. data: {
  25. items: [
  26. { name: 'angular', value: 'AngularJS' },
  27. { name: 'react', value: 'React', checked: true },
  28. { name: 'polymer', value: 'Polymer' },
  29. { name: 'vue', value: 'Vue.js' },
  30. { name: 'ember', value: 'Ember.js' },
  31. { name: 'backbone', value: 'Backbone.js', disabled: true },
  32. ],
  33. },
  34. onSubmit(e) {
  35. console.log('onSubmit', e);
  36. my.alert({
  37. content: `你選擇的框架是 ${e.detail.value.libs.join(', ')}`,
  38. });
  39. },
  40. onReset(e) {
  41. console.log('onReset', e);
  42. },
  43. onChange(e) {
  44. console.log(e);
  45. },
  46. });
  47. /* API-DEMO page/component/checkbox/checkbox.acss */
  48. .checkbox {
  49. display: block;
  50. margin-bottom: 20rpx;
  51. }
  52. button + button {
  53. margin-top: 32rpx;
  54. }
  55. .checkbox-text {
  56. font-size:34rpx;
  57. line-height: 1.2;
  58. }

屬性

屬性 類型 默認(rèn)值 描述 最低版本
value String - 組件值,選中時 change 事件會攜帶的 value。 -
checked Boolean false 當(dāng)前是否選中,可用來設(shè)置默認(rèn)選中。 -
disabled Boolean false 是否禁用。 -
onChange EventHandle - 組件發(fā)生改變時觸發(fā),detail = {value: 該 checkbox 是否 checked }。 -
color String - checkbox 的顏色,同 CSS 色值。 1.10.0
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號