京东复选框设计

BossCGP

已于 2023-09-26 14:36:09 修改

阅读量41

点赞数 1

文章标签： javascript 前端开发语言

于 2023-09-26 14:35:00 首次发布

本文链接：https://blog.csdn.net/zxcgknffgjik/article/details/133308466

版权

技术实现分析

京东的复选框菱角分明，旁边并没有弧度，所以其并不是一个checkbox。是用div模拟实现的效果。京东首先写出一个checkbox复选框，然后通过样式将其进行隐藏，用户无法看到复选框。在checkbox下面写出一个div，将div返还给用户，当用户点击复选框的时候，通过JS给div绑定一个点击事件。在点击事件内部，将不同的图片，铺在div内部，并且把勾选与不勾选的效果通过input传回来。