1、修改原生input[type=checkbox]样式
HTML:
<form>
<input id="select" name="select" type="checkbox" checked>
<label for="select"><i></i>选择</label>
</form>
CSS:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+label>i {
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid #bbb;
background: #FFF;
margin-right: 5px;
vertical-align: middle;
border-radius: 5px;
top: -1px;
}
input[type="checkbox"]:checked+label>i {
position: relative;
}
input[type="checkbox"]:checked+label>i::before {
content: '';
position: absolute;
width: 9px;
height: 18px;
color: black;
border-bottom: 1px solid #2db7f5;
border-right: 1px solid #2db7f5;
left: 50%;
top: 20%;
transform-origin: center;
transform: translate(-50%, -30%) rotate(40deg);
-webkit-transform: translate(-50%, -30%) rotate(40deg);
}
效果:
原生:
2、获取input[type=checkbox]状态
$('#select').on('click', function () {
let checkStatus = $('#select').prop("checked");
console.log(checkStatus)
})