自定义checkbox复选框

js:

$("#inner-table-list").on("click",".my-check-box",function(){
    $(this).hasClass("checked")? $(this).removeClass("checked"):$(this).addClass("checked");
})

css:

div.my-check-box{
    height: 16px;
    width: 16px;
    border-radius: 4px;
    border: 2px solid #0d6aad;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.my-check-box.checked:before{
    content: "✔";

}

html
 

 <table id="inner-table-list" width="100%">
   <div class="my-check-box">
   </div>
</table>

效果图:

自定义checkbox复选框

自定义checkbox复选框

上一篇:jq查找和拼接checkbox的值


下一篇:vue组件复选框-自定义事件