JS单选、多选、限制选择以及选中交换位置功能的实现与原理

1、单选功能的实现

首先再onshow里面将所有列表添加一个 checked = false 属性

<!-- 单选功能 -->
<view style="margin-top: 20rpx;">
		<view class="section-title">单选功能</view>
		<view class="shape-list-box">
			<view class="shape-list" v-for="(list,index) in changeList2" :key="index" @click="changeChecked2(index)">
			<view class="list-item" :class="{'list-item-active':list.checked}">
			<view class="cross" style="text-align: center;"></view>
			</view>
		</view>
	</view>
</view>

单选实现原理：根据下标来选择选择，通过forEach 将选中的更改 checked 属性的状态，未选中的全部将 checked 属性为false 

// 单选
changeChecked2(index) {
	let newList = this.changeList2;
	//通过循环将选中的状态更改，未选择的进行初始化
	newList.forEach((item, itemIndex) => {
		if (index == itemIndex) {
			newList[itemIndex].checked = !newList[itemIndex].checked;
			return;
		}
		newList[itemIndex].checked = false;
	});
	this.changeList2 = [];
	this.changeList2 = newList;
	console.log('获取到的选中状态：' + index + "  " + this.changeList2[index].checked);
	console.log("获取到其他列表：", this.changeList2);
},

 

2、多选功能、多选与反选

首先再onshow里面将所有列表添加一个 checked = false 属性

//通过forEach()方法将数组都添加一个选中属性 checked = false （单选）
this.changeList2.forEach(item => {
	item.checked = false;
});

多选实现原理：点击时的将所有选中的状态 newList[index].checked = !newList[index].checked; 取反值（选中与不选中）

反选实现原理：通过 forEach 将所有的checked状态全部取反值

重置实现原理：通过 forEach 将所有的checked状态全部取false

//多选
changeChecked(index) {
	let newList = this.changeList;
	newList[index].checked = !newList[index].checked;
	//解决页面数据更新后页面不刷新问题（先初始化数据，再重新赋值）
	this.changeList = [];
	this.changeList = newList;
	console.log('获取到的选中状态：' + index + "  " + this.changeList[index].checked);
},

//反选
invertSelected() {
	let newList = this.changeList;
	// 反选,将所有数据的状态取反值
	newList.forEach(item => {
		item.checked = !item.checked;
	});
	this.changeList = [];
	this.changeList = newList;
	console.log("反选数据", this.changeList);
},

// 重置
resetSelected() {
	let newList = this.changeList;
	//重置，将所有的数据都取初始化值
	newList.forEach(item => {
		item.checked = false;
	});
	this.changeList = [];
	this.changeList = newList;
	console.log("重置数据", this.changeList);
},

 

3、限制只能选中3个

（1）只选中三个

只能选三个实现原理：

判断 checked 的状态

  a.如果未选中 checked = false  , 判断存放选中内容的checkedList数组的长度是否超过限制 ，没有超过就 添加到 checkedList 中，超过之后就提示上限信息。

  b.如果选中  checked = true ，选中的点击就 将checked 设置成 false , 同时  通过includes() 方法判断 是否存在数组中，如果存在就通过 splice() 方法进行删除

//选中的数组
changeList3：[],
//存放已选中的内容
checedList3: [],




// 默认只能选择3个
changeChecked3(index) {
	let newList = this.changeList3;
	//判断是否选中，不管选中未选中都取反值
	if (newList[index].checked) {
		newList[index].checked = false;
		console.log('是否存在？' + this.checedList3.includes(index) + ' 当前下标： ' + index);
		//判断当前得下标值是否存在于checedList3数组中，如果存在就将当前值元素进行删除
		if (this.checedList3.includes(index)) {
		    //通过indexOf（）方法取到数组中的某个值下标进行删除
		    this.checedList3.splice(this.checedList3.indexOf(index), 1);
	        }
	} else {
	    //限制选中得数量，数量不能超过三个，选中之后就添加到checedList3数组中
	    if (this.checedList3.length < 3) {
		newList[index].checked = true;
		this.checedList3.push(index);
	    } else {
		console.error('已经添加上限了！！');
	    }
	}
	this.changeList3 = [];
	this.changeList3 = newList;
	console.log("获取到选中的列表：", this.checedList3);
},

（2）选中3个后覆盖最前面的

只能选三个,覆盖前面的选中实现原理：

判断 checked 的状态

  a.如果未选中 checked = false  , 判断存放选中内容的checkedList数组的长度是否超过限制 ，没有超过就 添加到 checkedList 中，超过之后就 通过 shift() 方法 删除数组中第一个数据，并将其删除掉的 index  的cheked 状态改成 false 

  b.如果选中  checked = true ，选中的点击就 将checked 设置成 false , 同时  通过includes() 方法判断 是否存在数组中，如果存在就通过 splice() 方法进行删除

 

//数据
changeList4:[],
//存放已选中的内容
checedList4: [],


// 默认只能选择3个
changeChecked4(index) {
	let newList = this.changeList4;
	//判断是否选中，不管选中未选中都取反值
	if (newList[index].checked) {
		newList[index].checked = false;
		console.log('是否存在？' + this.checedList4.includes(index) + ' 当前下标： ' + index);
		//判断当前得下标值是否存在于checedList4数组中，如果存在就将当前值元素进行删除
		if (this.checedList4.includes(index)) {
			//通过indexOf（）方法取到数组中的某个值下标进行删除
			this.checedList4.splice(this.checedList4.indexOf(index), 1);
		}
	} else {
		//未选中得，如果选中数组checedList4中得值上限了，就使用shift()方法删除掉第一个元素
		if (this.checedList4.length > 3 || this.checedList4.length==3 ) {
		//shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
			let delNumber = this.checedList4.shift();
			newList[delNumber].checked = false;
			console.warn('删除元素',delNumber);
		} 
		newList[index].checked = true;
                this.checedList4.push(index);
	}
	this.changeList4 = [];
	this.changeList4 = newList;
	console.log("获取到选中的列表：", this.checedList4);
},

 

 

4.选中两个交换位置

实现原理: 

  (1)首先将选中的下标的checked 属性 进行 取反值

（2）cheked 为 true  表示选中，同时判断 checkedChoos5 是否为null  null 未选中，点击时就将当前下标进行赋值，如果 !null 就是 已选中，点击其它就进行位置更换

（3）checked 为 false  初始化 checkedChoos5  = null  

//选中数组
changeList5:[],

//存放已选中的内容
checkedChoos5:null,



// 选中任意两个交换位置
changeChecked5(index) {
	let newList = this.changeList5;
	//通过循环将选中的状态更改，未选择的进行初始化
	newList.forEach((item, itemIndex) => {
	    if (index == itemIndex) {
		newList[itemIndex].checked = !newList[itemIndex].checked;
	        return;
	    }
	    newList[itemIndex].checked = false;
	});
	if(newList[index].checked){
	    console.log('已选中');
	    if(!this.checkedChoos5){
	        console.warn('获取空1'+this.checkedChoos5);
	        this.checkedChoos5=index;
	        console.warn('获取空2'+this.checkedChoos5);
	    }else{
		//位置交换
		console.log('获取下不为空'+this.checkedChoos5);
	        let temp = newList[this.checkedChoos5];
	        newList[this.checkedChoos5] = newList[index];
	        newList[index] = temp;
	        // 初始化
	        newList[index].checked = false;
	        newList[this.checkedChoos5].checked = false;
	        this.checkedChoos5=null;
	    }
	}else{
		console.log('~~已取消~~');
		console.log('~~初始化数据~~');
		this.checkedChoos5=null;
	}
	this.changeList5 = [];
	this.changeList5 = newList;
	console.log('获取到当前选中得下标'+this.checkedChoos5);
	console.log('获取到的选中状态：' + index + "  " +this.changeList5[index].checked);
	// console.log("获取到其他列表：", this.changeList5);
},

效果展示