uniapp的checkbox选中
时间: 2025-02-04 08:08:53 浏览: 36
### 实现 UniApp 中 Checkbox 的选中状态
#### 设置默认选中的复选框
为了设置某些 `checkbox` 默认被选中,在定义数据模型时可以预先指定这些项。通过绑定 `v-model` 或者 `:value` 属性来关联 Vue 组件的数据属性与视图层的状态。
```html
<template>
<view>
<!-- 使用 v-model 双向绑定 selectedItems -->
<checkbox-group class="block" @change="handleCheckboxChange">
<label v-for="(item, index) in items" :key="index">
<checkbox :value="item.value" :checked="selectedItems.includes(item.value)" />
{{ item.label }}
</label>
</checkbox-group>
</view>
</template>
<script>
export default {
data() {
return {
items: [
{ label: '选项一', value: 'A' },
{ label: '选项二', value: 'B' }
],
// 预设选中的项目
selectedItems: ['A'] // 这里表示默认选中 "选项一"
};
},
methods: {
handleCheckboxChange(e) {
console.log('当前选中的值:', e.detail.value);
}
}
};
</script>
```
此代码片段展示了如何初始化并显示带有预选项目的多选框列表[^1]。
#### 获取 Checkbox 的选中状态
当用户交互改变 `checkbox` 的选中情况时,可以通过监听 `@change` 事件捕获最新的选择结果。该事件触发后会传递一个对象给处理函数作为参数,其中包含了更新后的选中项数组 `detail.value`。
```javascript
methods: {
handleCheckboxChange(event) {
const values = event.detail.value;
if (values.length === 0) {
uni.showToast({
title: '请先同意协议',
icon: 'none'
});
} else {
// 执行下一步逻辑,比如跳转至登录页或其他操作
uni.navigateTo({
url: '/pages/login/index'
});
}
}
}
```
上述 JavaScript 方法说明了怎样基于用户的输入响应不同的业务需求——如果没有任何条目被选,则给出提示;反之则继续执行其他流程[^2]。
阅读全文
相关推荐


















