codecamp

checkbox-group

基础库 1.0.0 开始支持本组件。

多项选择器,内部由多个 checkbox 组成。


属性说明

属性名类型默认值必填说明最低版本
bindchangeeventhandlecheckbox-group 中选中项发生改变时触发 change 事件,detail = {value:[选中的 checkbox 的 value 的数组]}1.0.0


效果示例


代码示例

<view class="page-section page-section-space">
  <view class="page-section-title">默认样式</view>
  <label class="checkbox"> <checkbox value="cb" checked="true" />选中 </label>
  <label class="checkbox"> <checkbox value="cb" />未选中 </label>
</view>

<view class="page-section">
  <view class="page-section-title page-section-title-space">推荐展示样式</view>
  <view class="ttui-cells">
    <checkbox-group bindchange="checkboxChange">
      <label class="ttui-cell" tt:for="{{items}}" tt:key="{{item.value}}">
        <view class="ttui-cell__hd">
          <checkbox value="{{item.value}}" checked="{{item.checked}}" />
        </view>
        <view class="ttui-cell__bd">{{item.name}}</view>
      </label>
    </checkbox-group>
  </view>
</view>
Page({
  data: {
    items: [
      { value: "xigua", name: "西瓜视频" },
      { value: "toutiao", name: "今日头条", checked: "true" },
      { value: "huoshan", name: "火山小视频" },
      { value: "douyin", name: "抖音" },
      { value: "duanzi", name: "内涵段子" },
      { value: "flipgaram", name: "Flipagram" }
    ]
  },
  checkboxChange: function(e) {
    console.log("Checkbox 发生 change 事件,value 值为:", e.detail.value);

    var items = this.data.items,
      values = e.detail.value;
    for (var i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false;

      for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (items[i].value == values[j]) {
          items[i].checked = true;
          break;
        }
      }
    }

    this.setData({
      items: items
    });
  }
});
checkbox
form
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

字节跳动小程序 介绍

字节跳动小程序 开发

字节跳动小程序开发框架

字节跳动小程序开发框架基础说明

字节跳动小程序开发框架基础功能

字节跳动小程序开发框架逻辑层

无标题文章

无标题目录

API

无标题文章

无标题文章

无标题文章

无标题文章

无标题文章

无标题目录

无标题目录

无标题文章

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }