uniapp+vue3全选、全不选 模板

展示图

代码

<template>
	<view class="container">
		<!-- 列表项 -->
		<view v-for="item in listData" :key="item.id" class="list-item" @click="toggleSelection(item.id)">
			<text>{{ item.name }}</text>
			<text class="checkbox">{{ item.checked ? '✓' : '✗' }}</text>
		</view>

		<!-- 全选按钮 -->
		<view class="select-all" @click="toggleAllSelection">
			<text>{{ isAllChecked ? '取消全选' : '全选' }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		computed
	} from 'vue';

	// 响应式列表数据
	const listData = reactive([{
			id: 1,
			name: '选项1',
			checked: false
		},
		{
			id: 2,
			name: '选项2',
			checked: false
		},
		{
			id: 3,
			name: '选项3',
			checked: false
		},
	]);

	// 计算属性判断是否全选
	const isAllChecked = computed(() =>
		listData.every(item => item.checked)
	);

	// 切换单个选项状态
	const toggleSelection = (id) => {
		const item = listData.find(item => item.id === id);
		if (item) item.checked = !item.checked;
	};

	// 切换全选状态
	const toggleAllSelection = () => {
		const newValue = !isAllChecked.value;
		listData.forEach(item => item.checked = newValue);
	};
</script>

<style>
	.container {
		padding: 20rpx;
	}

	.list-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.checkbox {
		color: #007AFF;
		margin-left: 20rpx;
	}

	.select-all {
		margin-top: 40rpx;
		padding: 30rpx;
		background: #f0f0f0;
		text-align: center;
		border-radius: 10rpx;
	}
</style>

点击提交按钮，打印所选内容

<template>
  <view class="container">
    <!-- 列表项（原有代码保持不变） -->
    <view 
      v-for="item in listData" 
      :key="item.id" 
      class="list-item"
      @click="toggleSelection(item.id)"
    >
      <text>{{ item.name }}</text>
      <text class="checkbox">{{ item.checked ? '✓' : '✗' }}</text>
    </view>

    <!-- 操作区域 -->
    <view class="action-area">
      <!-- 全选按钮（原有代码保持不变） -->
      <view class="select-all" @click="toggleAllSelection">
        <text>{{ isAllChecked ? '取消全选' : '全选' }}</text>
      </view>
      
      <!-- 新增提交按钮 -->
      <view class="submit-btn" @click="submitSelected">
        <text>提交选中项</text>
      </view>
    </view>
  </view>
</template>

<script setup>
// 原有导入保持不变
import { reactive, computed } from 'vue';

// 响应式数据（原有数据保持不变）
const listData = reactive([
  { id: 1, name: '选项1', checked: false },
  { id: 2, name: '选项2', checked: false },
  { id: 3, name: '选项3', checked: false },
]);

// 计算属性（原有计算属性保持不变）
const isAllChecked = computed(() => 
  listData.every(item => item.checked)
);

// 原有方法保持不变
const toggleSelection = (id) => {
  const item = listData.find(item => item.id === id);
  if (item) item.checked = !item.checked;
};

const toggleAllSelection = () => {
  const newValue = !isAllChecked.value;
  listData.forEach(item => item.checked = newValue);
};

// 新增提交方法
const submitSelected = () => {
  // 获取选中项
  const selectedItems = listData
    .filter(item => item.checked)
    .map(({ id, name }) => ({ id, name }));
  
  // 打印到控制台
  console.log('当前选中项：', selectedItems);
  
  // 如果需要显示提示（可选）
  uni.showToast({
    title: `已提交${selectedItems.length}项`,
    icon: 'none'
  });
};
</script>

<style>
/* 原有样式保持不变 */
.container {
  padding: 20rpx;
}

.list-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.checkbox {
  color: #007AFF;
  margin-left: 20rpx;
}

/* 新增操作区域样式 */
.action-area {
  margin-top: 40rpx;
  display: flex;
  gap: 20rpx;
}

.select-all,
.submit-btn {
  flex: 1;
  padding: 30rpx;
  background: #f0f0f0;
  text-align: center;
  border-radius: 10rpx;
}

/* 提交按钮特殊样式 */
.submit-btn {
  background: #007AFF;
  color: white;
}
</style>