微信小程序 多选项目 checkbox & checkbox-group 组件

Posted java1234_小锋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 多选项目 checkbox & checkbox-group 组件相关的知识,希望对你有一定的参考价值。

完整微信小程序(Java后端) 技术贴目录清单页面(必看)

多项选择器(checkbox - group),内部由多个-checkbox组成。checkbox多项选择器组件,和html中的多选框是一样的,用来进行多项选择。

属性类型默认值必填说明最低版本
valuestringcheckbox标识,选中时触发checkbox-group的 change 事件,并携带 checkbox 的 value1.0.0
disabledbooleanfalse是否禁用1.0.0
checkedbooleanfalse当前是否选中,可用来设置默认选中1.0.0
colorstring#09BB07checkbox的颜色,同css的color1.0.0

示例代码

在开发者工具中预览效果

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.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)
  }
})

运行效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RZot32h7-1622196277756)(image-20210528100523992.png)]
多项选择器,内部由多个checkbox组成。

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

微信搜一搜【java1234】关注这个放荡不羁的程序员,关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

以上是关于微信小程序 多选项目 checkbox & checkbox-group 组件的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序全选多选效果

微信小程序checkbox样式修改

微信小程序实现多选分享

微信小程序金山文档怎么多选照片

微信小程序 checkbox 怎么变小

微信小程序 checkbox 怎么判断是不是选中