我们在做一些页面时，可能会用到很多的单选框和复选框，但是原生的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==){
this.checkBoxArr[index].selectStatus=;
}else{
this.checkBoxArr[index].selectStatus=
}
}多选框，控制选择框的样式切换，和单选框是一样的原理，但是单选框只能选一个，而多选框可以选多个，所以在实现多选框时，我们将每个多选框里面都加了个selectStatus属性，用来表示，每个多选框的选中状态。
补充一条：选中样式图片与未选中样式图片，可以自己找，可以去ali图库里下载，想用啥用啥。
下面是将bootstrap与单复选框结合起来的使用方式，响应式，美化选择框
<template>
<div>
<!-- 单选框 -->
<div class="row">
<div v-for="(item,index) in radioList" :key="index" class="col col-xs-12 col-sm-6 col-md-4">
<input v-show="false" type="radio" name="gender" :value="item.value" :id="item.value" :checked="sex==item.value" @click="clickRadio(item.value)" />
<label :for="item.value">
<div class="imgBox">
<img v-show="sex==item.value" src="../../assets/checked.png" alt="选中">
<img v-show="sex!=item.value" src="../../assets/noCheck.png" alt="未选中">
</div>
{{item.label}}
</label>
</div>
</div>
<input type="text" v-model="sex"> <hr> <!-- 复选框 -->
<div class="row">
<div v-for="item in checkBoxList" :key="item.value" class="col col-xs-12 col-sm-6 col-md-4">
<label>
<div class="imgBox">
<img v-show="fruit.includes(item.value)" src="../../assets/checked.png" alt="选中">
<img v-show="!fruit.includes(item.value)" src="../../assets/noCheck.png" alt="未选中">
</div>
<input v-show="false" @click="clickCheckBox(item.value)" name="Fruit" type="checkbox" :value="item.value" :checked="fruit.includes(item.value)" />
{{item.label}}
</label>
</div>
</div> <input type="text" :value="fruit.join()">
</div>
</template> <script>
export default {
data(){
return {
radioList:[
{value:"男",label:"男"},
{value:"女",label:"女"},
{value:"人妖",label:"人妖"}
],
sex:"男",
checkBoxList:[
{value:"苹果",label:"苹果"},
{value:"香蕉",label:"香蕉"},
{value:"梨",label:"梨"},
{value:"西瓜",label:"西瓜"}
],
fruit:["苹果","香蕉"]
}
},
methods:{
clickRadio(val){
this.sex=val;
},
clickCheckBox(val){
if(this.fruit.includes(val)){
this.fruit.splice(this.fruit.indexOf(val),1);
}else{
this.fruit.push(val);
}
console.log(this.fruit.join())
}
}
}
</script> <style lang="scss" scoped>
.imgBox{
width:16px;
height:16px;
display:inline-block;
}
.imgBox img{
width:100%;
height:100%;
} </style>
上图