美化版复选框

最新推荐文章于 2023-12-28 19:58:11 发布

weixin_33827590

最新推荐文章于 2023-12-28 19:58:11 发布

阅读量95

点赞数

原文链接：http://www.cnblogs.com/ITzhangyunpeng/p/9295930.html

版权

本文介绍了一种使用SVG图标实现自定义复选框样式的方法，并通过jQuery实现了按钮点击后获取所有被选中复选框的值的功能。文章详细展示了HTML结构、CSS样式及JavaScript/jQuery代码。

摘要由CSDN通过智能技术生成

注：需要引用jq

css部分

.checkboxWrapper input[type="checkbox"] {
display: none;
}

.checkboxWrapper input[type="checkbox"] + label {
cursor: pointer;
display: block;
}

.checkboxWrapper input[type="checkbox"] + label i {
display: inline-block;
vertical-align: middle;
}

.checkboxWrapper input[type="checkbox"] + label path {
stroke-dashoffset: -189;
stroke: inherit;
stroke-dasharray: 189;
transition: all ease-in-out 0.5s;
-webkit-transition: all ease-in-out 0.5s;
-moz-transition: all ease-in-out 0.5s;
-ms-transition: all ease-in-out 0.5s;
-o-transition: all ease-in-out 0.5s;
}

.checkboxWrapper input[type="checkbox"]:checked + label path {
stroke-dashoffset: 0;
}
/*----------------------Themes------------------------*/
/* Turquoise theme */
.theme1 {
stroke: #1ABC9C;
}
/**/

/* Emerald theme */
.theme2 {
stroke: #2ECC71;
}
/**/

js部分：

$(function () {
$("#btndayin").click(function () {
$("input[type='checkbox']:checked").each(function () {
var a = $(this).val();
alert(a);
});
});
});

html部分：