用户自定义多选框checkbox

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

        对于样式,网上已经有不少样板了,可是原理都是相通的,就是:隐藏真实的input:checkbox,用label代替,点击label指向隐藏的input,而后直接改写label的样式就行了浏览器

        

        改写label样式:spa

        

        改写完成后的多选框:设计

        

        固然,这是比较简单的样式修改,只是简单去掉了多选框前面的勾勾框,若是想要复杂好看的样式,能够去网上搜集,原理都是同样。开发

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

        直接上代码:原理

       

    

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

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

相关文章
相关标签/搜索