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

2024年06月06日建站教程

一个简单的多框列表，每个选项都有一个对应的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>

本文链接：http://so.lmcjl.com/news/6050/

展开阅读全文

上一篇：linux查看mysql是否运行下一篇：AttributeError: module numpy.random has no attribute &#