uni checkbox限制选择的个数

最新推荐文章于 2024-08-21 18:08:02 发布

0131

最新推荐文章于 2024-08-21 18:08:02 发布

阅读量1.6k

点赞数

分类专栏： uniApp 文章标签：前端 javascript

本文链接：https://blog.csdn.net/csdn_yuan_/article/details/109011528

版权

uniApp 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<template>
	<view>
		<checkbox-group style="display: flex;justify-content: space-between;" @change="checkboxChange">
			<label v-for="item in items" :key="item.value">
				<checkbox :value="item.value" :checked="item.checked"/>
				<view>{{item.name}}</view>
			</label>
		</checkbox-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [
					{
						value: 'USA',
						name: '美国'
					},
					{
						value: 'CHN',
						name: '中国'
					},
					{
						value: 'BRA',
						name: '巴西'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					}
				]
			}
		},
		methods: {
			checkboxChange: function(e) {
				var current = e.detail.value
				//新建数组全部设置为未选中  
				var new_itmes = [
					{
						value: 'USA',
						name: '美国'
					},
					{
						value: 'CHN',
						name: '中国'
					},
					{
						value: 'BRA',
						name: '巴西'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					}
				]
				if (current.length > 3) {
				
					//取出倒数三个值  
					var key1 = current[current.length - 1];
					var key2 = current[current.length - 2];
					var key3 = current[current.length - 3];

					//设置最后三个值为选中状态
					new_itmes.forEach(el => {
						if (el.value == key1 || el.value == key2 || el.value == key3) {
							el.checked = true
						}
					})

					//删除被选中的第一个值  
					current.splice(0, 1);
				} else {
					//被选中少于三个，直接设置被选中
					new_itmes.forEach(el => {
						current.forEach(ell => {
							if (el.value == ell) {
								el.checked = true
							}
						})
					})
				}
				this.items = new_itmes
			}
		}
	}
</script>