Vue复选框默认样式以及取值问题

最新推荐文章于 2025-06-25 09:18:59 发布

原创最新推荐文章于 2025-06-25 09:18:59 发布 · 4.6k 阅读

6 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS自定义Vue项目的复选框样式，并通过v-for循环实现动态数据绑定，解决复选框取值问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结前的碎碎念

改变复选框样式的需求之前也遇到过，也百度了很多回，总找不到理想的答案，都是一些处理起来很复杂的方案，可能百度的姿势不对。今天又遇到同样的需求，又问了一回度娘，这回姿势终于对了！原来这么简单！！

好了，闲话少说，开始干正事吧。

改变复选框的默认样式

参考博客：https://www.cnblogs.com/yuanyanbk/p/8136682.html

博主代码

<label class="checkBox"><input type="checkbox">全选</label>

input[type='checkbox']{
    width: 20px;
    height: 20px;
    background-color: #fff;
    -webkit-appearance:none;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    outline: none;
}

.checkBox input[type=checkbox]:checked{
   background: url("../images/checkbox_icon.png")no-repeat center;
}

v-for的复选框取值问题

网上关于vue复选框取值的博客都很多，但很少有v-for出来的数据，都是写死的数据。但是真正开发中数据都是变化的，大多是循环出来的数据。今天机缘巧合之下，终于让我搞懂了这个复选框到底是怎么一回事。我也算是对得起菜鸟这两个字了，这么久才搞懂。先上代码吧~

HTML代码片段


	<label id="label" 
        :for="item3" 
        @click="chooseType($event,index3)" 
        v-for="(item3,index3) in type" >
		<input type="checkbox" :value="item3" :id="item3" v-model="checkedValue">
		<div class="name">{{item3}}</div>
	</label>

JS代码

export default{
    data(){
        return{
            checkedValue: []
        }
    }
}

什么？还不懂？给你看看浏览器中渲染出来的数据你就懂了

F12审查元素渲染出来的结果如下

注意认真观察<label>标签中for值的变化，<input>标签中id值的变化和value值的变化

get到了vue复选框的强大了吗？这三个值的绑定都是可以根据需要变化的

接下来看看勾选之后的变化，data里面的checkedValue就是为测试而生的

我就不重复贴代码了，放张图吧

没勾选之前

勾选之后

再来

现在很清晰了有木有！然后就可以根据我们取到的值来处理逻辑啦啦啦

CSS代码片段

	input[type="checkbox"]{
		width: 16px;
		height: 16px;
		background: #F5F5F5;
		border: 1px solid #EAEAEA;
		float: left;
		margin-top: 12px;
		margin-right: 11px;
		cursor: pointer;
		-webkit-appearance:none;
		outline: none;
	}
	input[type="checkbox"]:checked{
		background: url(../../assets/images/tick.png) 0 0/14px 14px no-repeat;
	}