美化版复选框

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

<div class="checkboxWrapper theme1">
<input type="checkbox" id="sample1" value="1">
<label for="sample1">
<i>
<svg version="1.1" id="Layer_1" x="0px" y="0px"
width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<circle fill="none" stroke="#B7B7B7" stroke-width="3" stroke-miterlimit="10" cx="25.11" cy="24.883" r="23.519" />
<path fill="none" stroke-width="3" stroke-miterlimit="10" d="M48.659,25c0,12.998-10.537,23.534-23.534,23.534
S1.591,37.998,1.591,25S12.127,1.466,25.125,1.466c9.291,0,17.325,5.384,21.151,13.203L19,36l-9-14" />
</svg>
</i>
选项一
</label>
</div>
<div class="checkboxWrapper theme2">
<input type="checkbox" id="sample2" value="2">
<label for="sample2">
<i>
<svg version="1.1" id="Svg1" x="0px" y="0px"
width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<circle fill="none" stroke="#B7B7B7" stroke-width="3" stroke-miterlimit="10" cx="25.11" cy="24.883" r="23.519" />
<path fill="none" stroke-width="3" stroke-miterlimit="10" d="M48.659,25c0,12.998-10.537,23.534-23.534,23.534
S1.591,37.998,1.591,25S12.127,1.466,25.125,1.466c9.291,0,17.325,5.384,21.151,13.203L19,36l-9-14" />
</svg>
</i>
选项二
</label>
</div>
<input type="button" value="dayin" id="btndayin" />

界面如图：

原文地址：https://www.cnblogs.com/ITzhangyunpeng/p/9295930.html