uni-app 内置组件:CheckboxGroup

CheckboxGroup 组件是 uni-app 中用于创建一组复选框的容器,可以包含多个 Checkbox 项,并且可以实现多选。

API

CheckboxGroup 组件可以与多个 Checkbox 组件一起使用,来创建复选框组。每个 Checkbox 都有自己的 value 属性,这个值在选中时会被 CheckboxGroup 获取并作为其 value 的一部分。

属性

CheckboxGroup 组件的主要属性:

  • name:复选框组名称,在表单提交时使用。
  • bindchange:当 CheckboxGroup 中的选项变化时,触发 change 事件,event.detail = {value: ['选中的checkbox的value的数组']}。

事件

bindchange

CheckboxGroup 中的选项变化时触发的事件,返回一个数组,包含了所有选中的 Checkbox 的值。

示例

HTML 部分:

html 复制代码
<checkbox-group name="checkboxGroup" bindchange="checkboxChange">
  <checkbox value="value1">选项1</checkbox>
  <checkbox value="value2">选项2</checkbox>
  <checkbox value="value3">选项3</checkbox>
</checkbox-group>

JavaScript 部分:

javascript 复制代码
export default {
  methods: {
    checkboxChange(e) {
      console.log('checkbox发生change事件,携带value值为:', e.detail.value);
    }
  }
}

在此示例中,当 CheckboxGroup 中的任何一个 Checkbox 被选中或取消选中时,checkboxChange 方法都会被调用,并输出被选中的 Checkbox 的值。

在使用 CheckboxGroup 时,通常需要处理用户的选择结果。你可以在 checkboxChange 事件处理函数中获取到用户的选择数组,然后根据业务需要进行相应的处理。

以上是 CheckboxGroup 组件的基本介绍和使用示例,具体的属性和事件可能会根据 uni-app 的版本更新有所变动,请参考最新的uni-app 官方文档

相关推荐
FuckPatience1 小时前
前端Vue 后端ASP.NET Core WebApi 本地调试交互过程
前端·vue.js·asp.net
北城以北88881 小时前
Vue-- Axios 交互(二)
javascript·vue.js·交互
我总是词不达意2 小时前
vue3 + el-upload组件集成阿里云视频点播从本地上传至点播存储
前端·vue.js·阿里云·elementui
北城以北88882 小时前
Vue-- Axios 交互(一)
前端·javascript·vue.js
前端开发爱好者2 小时前
Vite➕ 收费了!
前端·javascript·vue.js
羊羊小栈2 小时前
基于「多模态大模型 + BGE向量检索增强RAG」的新能源汽车故障诊断智能问答系统(vue+flask+AI算法)
vue.js·人工智能·算法·flask·汽车·毕业设计·大作业
麦麦大数据4 小时前
F024 vue+flask电影知识图谱推荐系统vue+neo4j +python实现
vue.js·python·flask·知识图谱·推荐算法·电影推荐
临江仙4554 小时前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
数字化顾问4 小时前
基于Spring Boot + Vue 3的乡村振兴综合服务平台架构设计与实现
vue.js·spring boot·后端
Neil鹏5 小时前
解决 Vite 代理中的 E RR_CONTENT_DECODING_FAILED 错误:禁用自动压缩的实践
vue.js