单选多选问题（利用js方法编写）/vue react通用，此处是使用uni-app写的实例

场景（单选）：选择人进行切换

选中图片：(check)

未选中图片：(uncheck)

css（样式自己设置）：

<>
	<view v-for="(item,i) in list || [] :key = "i"">
	<image src="@/static/img/check.png" v-if="item.checked">
	<image src="@/static/img/uncheck.png" v-else>
	<view @click="onChange(item)">{{ item.userName }}</view>
	</view>
	<view @click="submit">提交</view>
</>

js:

data(){
	list:[
  		{
    	"id": "5d7b1c73ea36c51528bd004230662c74",
   		 "userName": "刘天琦",
  		},
  		{
    	"id": "2d7d3a93495e234efcd1eaa679d2dc5f",
   		"userName": "李西万",
  		},
	],		
}

methods:{
	//点击某一项
onChange(item) {
	this.list = this.checkItem(this.list, item.id)
},
//选中的某一项（单选）
checkItem(array,id){
	let list = array.map((item)=>{
		if(item.id === id){
			item.checked = !item.checked;
		}
		return item;
	})
	return list.map((items)=>{
		if(items.id !== id){
			item.checked = false;
		}
		return items
	})
}
//提交
submit(){
	const eveDate = this.list.filter((i)=>i.checked) //某一项的数据
	//然后就可以拿到某一项的数据进行调接口；
	}
}

场景（多选及全选）：可选择多个人

选中未选中的图片同上；

css：
（样式随机）

<view  style="margin-bottom: 30upx;">
    <image src="@/static/img/check.png" v-if="allIsable"></image>
    <image src="@/static/img/uncheck.png" v-else></image>
    <view style="align-items: center;">
		<view style="color: #009e8e;" @click="allCheck">全选</view>
    </view>
    <view v-for="(item,i) in list || [] :key = "i"">
		<image src="@/static/img/check.png" v-if="item.checked">
		<image src="@/static/img/uncheck.png" v-else>
	<view @click="onChange(item)">{{ item.userName }}</view>
	</view>
	<view @click="submit">提交</view>
</view>

js：

data(){
	allIsable: false,//全选初始状态
	list:[
  		{
    	"id": "5d7b1c73ea36c51528bd004230662c74",
   		 "userName": "刘天琦",
  		},
  		{
    	"id": "2d7d3a93495e234efcd1eaa679d2dc5f",
   		"userName": "李西万",
  		},
	],		
}

methods:{
	//点击某一项
onChange(item) {
	this.list = this.checkItem(this.list, item.id)
},
//点击选中（多选）
checkItem(array,id){
	let list = array.map((item)=>{
		if(item.id === id){
			item.checked = !item.checked;
		}
		return item;
	});
	return list;
}
//全选
allCheck() {
	let all = this.list.every((item) => item.checked);
	this.allIsable = all ? false : true;
    this.list.forEach((item) => {
    	if (all) {
        	item.checked = false;
        } else {
        	item.checked = true;
         }
    });
},
//提交
submit(){
	const eveDate = this.list.filter((i)=>i.checked) //某一项的数据
	//然后就可以拿到某一项的数据进行调接口；
	}
}