微信小程序----组件之checkbox

效果图：

项目结构：

核心代码：

index.wxml

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

index.wxss

.checkbox{  display: block;  background-color: yellow}

index.js

Page({  /**   * 页面的初始数据   */  data: {    items: [      { name: 'USA', value: '美国' },      { name: 'CHN', value: '中国', checked: 'true' },      { name: 'BRA', value: '巴西' },      { name: 'JPN', value: '日本' },      { name: 'ENG', value: '英国' },      { name: 'TUR', value: '法国' },    ]  },  checkboxChange: function (e) {    console.log('checkbox发生change事件，携带value值为：', e.detail.value)  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {      },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {      },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {      },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {      },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {      },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {      },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {      },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {      }   })

源码下载：http://download.csdn.net/download/zhaihaohao1/9968483