uni-app中使用选择框图片来写单选，多选，以及不可选择
（check.png）
(checkbox.png)
(checkDisable.png)
以上三张图是我的可选择状态，已选中，以及不可选择等三种；接下来来写几种使用情景；具体样式我不再细写了，只说逻辑，需要说明image需要放在你所选择的循环里，比如如下，仅做展示，样式可以根据需要写
1：只支持单选，并且都可以选择
<image v-if="orderarr.length!=0" @click="toCheck(item.id)" class="check" :src="orderarr.includes(item.id)?'/static/img/check.png':'/static/img/checkbox.png'"></image> 这里是表示，已选中是选中状态，未选中则是可选择状态 <image v-else @click="toCheck(item.id)" class="check" src="/static/img/checkbox.png"></image> 这里是表示当前需要选择的内容全部可选
其中的orderarr是你所选中的id数组，includes方法是判断当前数组是否包含当前循环的id
check方法
toCheck(id){
if(this.orderarr.length==0){//判断当前id数组是否为空，若是为空，则直接push
this.orderarr.push(id)
}else{
this.orderarr=[]//由于当前逻辑是单选，直接清空再push就好了
this.orderarr.push(id)
}
console.log(this.orderarr); },
2：支持多选，并且所有选项均可选择
toCheck(id){
if(this.orderarr.length==0){//判断当前id数组是否为空，若是为空，则直接push
this.orderarr.push(id)
}else{
if(this.orderarr.includes(id)){//判断当前点击的选项是否已经被选择了
this.orderarr.forEach((val,index) => {
if(val==id){//若被选择，则清除调当前选项
this.orderarr.splice(index,1);
}
});
} else{
this.orderarr.push(id)//若没有被选择，则直接push
}
}
console.log(this.orderarr);
},
3：支持多选，并且，当某选项只可单选时，其他选项禁止点击；
<view v-show="isSuperpose"> 当前为已选中状态，其中其他选项不可点击 <image v-if="couponArr.length!=0" @click="toCheck(c)" class="check" :src="couponArr.includes(c.id)?'/static/img/check.png':'/static/img/checkDisable.png'"></image> <image v-else @click="toCheck(c)" class="check" src="/static/img/checkbox.png"></image> </view> <view v-show="!isSuperpose"> 当前为已选中状态，其中其他选项可以点击选择 <image v-if="couponArr.length!=0" @click="toCheck(c)" class="check" :src="couponArr.includes(c.id)?'/static/img/check.png':'/static/img/checkbox.png'"></image> <image v-else @click="toCheck(c)" class="check" src="/static/img/checkbox.png"></image> </view>
toCheck方法
toCheck(item){
console.log(item.superpose);
if(this.isSuperpose){//如果当前除已选中状态外，其他选项不可点击
if(this.couponArr.includes(item.id)){//判断当前点击的是否已经被选择，若当前选项已被选择，则当前点击操作是取消选中，并可以选择其他选项
this.couponArr.forEach((val,index) => {
if(val==item.id){
this.couponArr.splice(index,1);
}
});
this.isSuperpose=false
} else{
//因为其与选项不可点击，所以不作操作
}
}else{
if(item.superpose==1){//我们是在接口中返回是当前选择项是否可多选，当值为1时，不可多选
if(this.couponArr.length==0){
this.couponArr.push(item.id)//未选中时，直接push
}else{
console.log(this.couponArr);//若有已选中选项，但由于当前项只可单选，则直接清空couponArr,在push
this.couponArr=[]
this.couponArr.push(item.id)
}
this.isSuperpose=true//并将状态修改成其他选项不可选择
}else{//若当前选择项可以多选
if(this.couponArr.length==0){
this.couponArr.push(item.id)//未选中时，直接push
}else{剩下多选的逻辑则同上
if(this.couponArr.includes(item.id)){
this.couponArr.forEach((val,index) => {
if(val==item.id){;
this.couponArr.splice(index,1);
}
});
} else{
this.couponArr.push(item.id)
}
}
this.isSuperpose=false
}
}
},
