一个简单的多框列表,每个选项都有一个对应的id。单击复选框以更改复选框的状态,并在阵列中添加或删除选定的id。点击“获取选中的id”按钮,控制台将输出选中的id。
具体示例如下:
<template> <view> <checkbox-group> <checkbox v-for="item in checkboxList" :key="item.id" :value="item.checked" @change="checkboxChange(item.id)"> {{ item.label }} </checkbox> </checkbox-group> <button @click="getSelectedIds"> 获取选中的id </button> </view> </template> <script> export default { data() { return { checkboxList: [{ id: 1, label: '选项1', checked: false }, { id: 2, label: '选项2', checked: false }, { id: 3, label: '选项3', checked: false }], selectedIds: [] }; }, methods: { checkboxChange(id) { const index = this.selectedIds.indexOf(id); if (index === -1) { this.selectedIds.push(id); } else { this.selectedIds.splice(index, 1); } }, getSelectedIds() { console.log('选中的id:', this.selectedIds); } } }; </script>
uniapp开发微信小程序提示“启动组件按需注入未通过”解决方法
uniapp如何实现扫码枪自带条码读取功能(附vue.js具体代码)
uniapp如何利用单选框(radio)替代多选框(checkbox)
标签: checkbox事件, uniapp开发
上面是“uniapp关于checkbox的运用,获取选中数据”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_11928.html
workflows工作流
泰坦尼克号桌面壁纸上ComfyUI工作流
一位穿着优雅银色装饰黑色连衣裙的苗条模特
一只沮丧的卡通小丑鱼ComfyUI工作流
红伞伞蓝杆杆云南蘑菇群ComfyUI工作流
一个黄色的海绵宝宝ComfyUI工作流
瀑布边坐着一位披着斗篷的隐士
一个孤独的斗篷人物站在一座巨大的雕塑旁
一座生动的点彩主义灯塔ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!