uniapp checkbox 获取选中id，uniapp单选框代码

在Uni-app中，可以使用`<checkbox>`组件实现多选框功能。要获取选中的id，可以通过以下步骤进行操作：

    1. 在data中定义一个数组用于存储选中的id，例如`selectedIds: []`。

    2. 在`<checkbox>`组件上绑定一个change事件，并传递选中的id作为参数，例如`@change="checkboxChange(item.id)"`。

    3. 在相应的方法中，根据checkbox的选中状态将id添加或删除到selectedIds数组中，实现选中与取消选中的功能。

    下面是一个示例代码：

<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>
<style>
</style>

    以上代码实现了一个简单的多选框列表，每个选项都有一个与之对应的id。通过点击checkbox来改变checkbox的状态，并将选中的id添加或从数组中删除。点击"获取选中的id"按钮后，控制台会输出选中的id。

    如果需要使用单选框（radio）替代多选框（checkbox），只需要使用`<radio>`和`<radio-group>`组件，并稍作修改即可。具体修改方法如下：

    1. 使用`<radio>`组件替换`<checkbox>`组件。

    2. 在`<radio-group>`组件上添加一个change事件，用于监听选中项的改变。

    3. 将`checkboxChange`方法改为`radioChange`方法，并修改其中的逻辑。

    4. 修改获取选中id的方法名。

    修改后的示例代码如下：

   
<template>
   
<view>
   
<radio-group @change="radioChange">
   
<radio v-for="item in radioList" :key="item.id" :value="item.checked">
   
{{ item.label }}
   
</radio>
   
</radio-group>
   
<button @click="getSelectedId">获取选中的id</button>
   
</view>
   
</template>
   
<script>
   
export default {
   
data() {
   
return {
   
radioList: [
   
{ id: 1, label: '选项1', checked: false },
   
{ id: 2, label: '选项2', checked: false },
   
{ id: 3, label: '选项3', checked: false }
   
],
   
selectedId: ''
   
};
   
},
   
methods: {
   
radioChange(value) {
   
this.selectedId = value;
   
},
   
getSelectedId() {
   
console.log('选中的id:', this.selectedId);
   
}
   
}
   
};
   
</script>
   
<style>
   
</style>

这样，点击radio后可以获取到选中的id。