微信小程序day03_02之form组件 checkbox与lable

一.checkbox

checkbox的属性如下 代码示例

中国 
日本 
美国 

显示效果:

二. checkbox-group

checkbox-group 为多个checkbox的组合 内部由多个checkbox组成。 代码示例 中包含了多个的checkbox

    中国 
    日本 
    美国 

效果如图

三. lable与CheckBox的组合

label 用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有：, , , 示例 lable与checkbox 的组合代码 js中的代码如下, 定义了一个数组

// pages/checkbox/checkbox.js
Page({

  data: {
    array: [
      {
        id: "1001",name:"中国" ,value:"中国" ,checked:false,color:"red",disabled:false,sdf:"sdfsd"
      },
      {
        id: "1002", name: "日本", value: "日本", checked: true, color: "red", disabled: false,sdfsdf:"sfsdfd"
      },
      {
        id: "1003", name: "美国", value: "美国", checked: true, color: "red", disabled: false,sdf55sdf:"sdfsdfdf"
      }
    ]
  }
})

wxml中的代码如下

{array}}
    {item.id}}{item.name}}{item.checked}}{item.color}}{item.disabled}} {{item.value}}


6666

显示效果如下: 其中有6666 该标签中, for属性的作用是对id为1001的checkbox进行控制, 即点击6666, 那么则会选中"中国" 官方文档说明如下 官方文档地址 https://developers.weixin.qq.com/miniprogram/dev/component/label.html