300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 用户自定义多选框checkbox

用户自定义多选框checkbox

时间:2023-03-17 22:12:52

相关推荐

用户自定义多选框checkbox

独角兽企业重金招聘Python工程师标准>>>

在实际项目开发中,浏览器自带的checkbox样式以及选择项是远远无法满足需求的,在实际项目中,需求往往可能是这样:被设计好样式的checkbox以及多选项只能保持两个或其他不超过某个固定数。那样,我们就必须重写自带checkbox的样式和选择逻辑了。

对于样式,网上已经有很多样板了,但是原理都是相通的,就是:隐藏真实的input:checkbox,用label代替,点击label指向隐藏的input,然后直接改写label的样式就好了。

改写label样式:

改写完成后的多选框:

当然,这是比较简单的样式修改,只是简单去掉了多选框前面的勾勾框,如果想要复杂好看的样式,可以去网上搜集,原理都是一样。

然后,我们就要对其选择逻辑进行修改了,浏览器自带的多选框仅支持选择0个以上,无法自由控制上限以及下限数,现在我们通过改写它的默认选择逻辑来完成这样一个需求:多选框只能多选两个,并且最低必须选择一个。

直接上代码:

其实核心原理就是:将选择的多选框放进数组,取消的元素从数组里面去掉,通过限制数组里的数量来

指定多选框的最大选择数和最小选择数量。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。
相关阅读
实现checkbox的多选

实现checkbox的多选

2023-03-06

实现checkbox的多选

实现checkbox的多选

2020-02-07

CheckBox多选框

CheckBox多选框

2022-09-20

Checkbox 多选框

Checkbox 多选框

2019-01-16