uniapp关于checkbox的运用，获取选中数据

一个简单的多框列表，每个选项都有一个对应的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开发axios接口调用解决跨域问题（只需4步）

uniapp如何实现扫码枪自带条码读取功能（附vue.js具体代码）

uniapp打包后，打开app有忽略版本检查提示框解决方法

uniapp如何利用单选框（radio）替代多选框（checkbox）

标签： checkbox事件, uniapp开发

上面是“uniapp关于checkbox的运用，获取选中数据”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_11928.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！