我们在做一些页面时，可能会用到很多的单选框和复选框，但是原生的radio和checkbox前面的原型图标或方框样式不尽人意。于是，决定自己来实现单选框和复选框。我用的是vue，所以就用vue的方式实现单选和复选框。
下面来看一下单选框的实现：
template
<!-- 单选框 --> <span class="selfRadio" @click="clickRadio(1)"> <span class="selfRadioImgBox"> <img v-show="radioVal==1" src="../assets/img/checked.png" alt="选中图标"> <img v-show="radioVal!=1" src="../assets/img/noCheck.png" alt="未选中图标"> </span> 单选框 </span> <span class="selfRadio" @click="clickRadio(2)"> <span class="selfRadioImgBox"> <img v-show="radioVal==2" src="../assets/img/checked.png" alt="选中图标"> <img v-show="radioVal!=2" src="../assets/img/noCheck.png" alt="未选中图标"> </span> 单选框 </span>
style
.selfRadio{ cursor: pointer; .selfRadioImgBox img{ width:18px; height:18px; } .selfRadioText{ margin-left:10px; } }
data
radioVal:0,
methods
clickRadio(val){ if(this.radioVal==val){ this.radioVal=0; }else{ this.radioVal=val; } }
单选框的实现，主体思想是，我们自己选两张图片，用v-show来控制其显示或隐藏，这样达到与单选框一样的效果，而且选择框可以根据自己的意愿来换。
下面来看一下多选框的实现：
data：
checkBoxArr:[
{
text:‘多选框1‘,
selectStatus:0
},
{
text:‘多选框2‘,
selectStatus:0
}
]
template
<!-- 多选框 --> <span class="selfCheckBox" @click="clickCheckBox(index)" v-for="( item,index) in checkBoxArr" :key="index"> <span class="selfCkeckImgBox"> <img v-show="item.selectStatus==1" src="../assets/img/checked.png" alt="选中图标"> <img v-show="item.selectStatus==0" src="../assets/img/noCheck.png" alt="未选中图标"> </span> <span class="checkBoxText"> {{ item.text }} </span> </span>
style
.selfCheckBox{ cursor: pointer; .selfCkeckImgBox img{ width:30px; height:30px; } .checkBoxText{ margin-left:10px; } }
methods
clickCheckBox(index){ if(this.checkBoxArr[index].selectStatus==1){ this.checkBoxArr[index].selectStatus=0; }else{ this.checkBoxArr[index].selectStatus=1 } }
多选框，控制选择框的样式切换，和单选框是一样的原理，但是单选框只能选一个，而多选框可以选多个，所以在实现多选框时，我们将每个多选框里面都加了个selectStatus属性，用来表示，每个多选框的选中状态。
补充一条：选中样式图片与未选中样式图片，可以自己找，可以去ali图库里下载，想用啥用啥。
原文：https://www.cnblogs.com/fqh123/p/10925110.html