我们在做一些页面时,可能会用到很多的单选框和复选框,但是原生的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>

上图

vue中单选框与多选框的实现与美化的更多相关文章

  1. vue.js实现单选框、复选框和下拉框

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框   在传统的HTM ...

  2. Android笔记(十五) Android中的基本组件——单选框和复选框

    单选框和多选框通常用来在设置用户个人资料时候,选择性别.爱好等,不需要用户直接输入,直接在备选选项中选择,简单方便. 直接看代码: <?xml version="1.0" e ...

  3. Android开发之使用AlertDialog创建对话框,单选框和多选框

    对话框: 对话框的icon,title,message等都可以不设置. 单选框和多选框与对话框勾选步骤基本上一致. 对话框的构建步骤: 1.使用AlertDialog类的内部类Builder类new ...

  4. AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定

    AngularJS与单选框及多选框的双向动态绑定      赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...

  5. CSS学习笔记三:自定义单选框,复选框,开关

    一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...

  6. 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. 微信小程序-修改单选框和复选框大小的方法

    方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保 ...

  8. HTML--使用单选框、复选框,让用户选择

    在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看 ...

  9. jQuery获取单选框(复选框)选中的状态

    jQuery 获取单选框(复选框)选中的状态 <input type="checkbox" name="" id="choose"/& ...

随机推荐

  1. hdu 1215 求约数和 唯一分解定理的基本运用

    http://acm.hdu.edu.cn/showproblem.php?pid=1215 题意:求解小于n的所有因子和 利用数论的唯一分解定理. 若n = p1^e1 * p2^e2 * ……*p ...

  2. nofollow标签浪费了多少站长做外链的时间

    对于rel=“external nofollow”和rel=“nofollow”,这两句代码,使用起来效果基本是一致的,只是前者较后者更为规范一点,两者翻译过来的意思就是:rel=“external ...

  3. 向PHP使用Post方式上传文件

    欢迎访问我的个人博客,获取更多有用的东西 链接一 链接二 也可以关注我的微信订阅号:CN丶Moti 1.post-file.html form表单提交方式一定要是post,而且添加属性enctype= ...

  4. git commit报错解决,绕过代码检查

    上一个项目用的svn,新项目用了git,很开心,终于学习了git了,本以为把git都学会了,但是还是遇到了一个不在自己学习的知识点范围内的问题,最后是同事帮忙解决的. 问题:第一次代码commit的时 ...

  5. vue 编辑

    点击文字修改 <div class="baseInfo"> <p class="title">基本信息</p> <p ...

  6. python图像处理

    Python常用处理图像的库是PIL,另外还有opencv.Matplotlib.NumPy.SciPy.skimage 详情请参考:https://www.cnblogs.com/qiaozhoul ...

  7. 4.Linux用户与权限管理

    Linux 系统是一个多用于多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统 新增用户: useradd  新用户名 设置密码:pa ...

  8. Lua游戏逆向及破解方法介绍

    Lua游戏逆向及破解方法介绍   背景介绍 随着手游的发展,越来越多的Cocos-lua端游开发者转移到手游平台.Lua脚本编写逻辑的手游也是越来越多,如梦幻西游.刀塔传奇.开心消消乐.游龙英雄.奇迹 ...

  9. yocto project user’s guide

    http://www.yoctoproject.org/docs/2.1/ref-manual/ref-manual.html 参考手册 http://www.yoctoproject.org/doc ...

  10. 《python解释器源码剖析》第3章--python中的str对象

    3.0 序 我们知道python中的字符串属于变长对象,当然和int也是一样,底层的结构体实例所维护的数据的长度,在对象没有定义的时候是不知道的.当然如果是python2的话,底层PyIntObjec ...