美化版复选框

Posted 2020-12-03 itzhangyunpeng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了美化版复选框相关的知识，希望对你有一定的参考价值。

注：需要引用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部分：

界面如图：

技术分享图片

以上是关于美化版复选框的主要内容，如果未能解决你的问题，请参考以下文章