CSS復選框onclick

.checkbox {
display: none; /* 隱藏原始復選框 */
}
.checkbox-label {
display: inline-block;
position: relative;
padding-left: 25px;
cursor: pointer;
}
.checkbox-label:before {
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 3px;
width: 17px;
height: 17px;
border: 1px solid #ccc;
border-radius: 2px;
background-color: #fff;
}
.checkbox:checked + .checkbox-label:before {
content: "\2714"; /* 使用Unicode符號顯示勾選狀態 */
color: #007bff;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 17px;
}

復選框實現

CSS復選框通過隱藏原始的復選框，使用label標簽綁定點擊事件來實現。

復選框

jquery實現

可以使用jquery實現復選框選中狀態下的樣式變化。

$('.checkbox').on('click', function(){
if ($(this).is(':checked')) {
$(this).next('.checkbox-label').addClass('checked');
} else {
$(this).next('.checkbox-label').removeClass('checked');
}
});