用户自定义多选框checkbox
2016-12-13 11:53
906 查看
在实际项目开发中,浏览器自带的checkbox样式以及选择项是远远无法满足需求的,在实际项目中,需求往往可能是这样:被设计好样式的checkbox以及多选项只能保持两个或其他不超过某个固定数。那样,我们就必须重写自带checkbox的样式和选择逻辑了。
对于样式,网上已经有很多样板了,但是原理都是相通的,就是:隐藏真实的input:checkbox,用label代替,点击label指向隐藏的input,然后直接改写label的样式就好了。
改写label样式:
改写完成后的多选框:
当然,这是比较简单的样式修改,只是简单去掉了多选框前面的勾勾框,如果想要复杂好看的样式,可以去网上搜集,原理都是一样。
然后,我们就要对其选择逻辑进行修改了,浏览器自带的多选框仅支持选择0个以上,无法自由控制上限以及下限数,现在我们通过改写它的默认选择逻辑来完成这样一个需求:多选框只能多选两个,并且最低必须选择一个。
直接上代码:
其实核心原理就是:将选择的多选框放进数组,取消的元素从数组里面去掉,通过限制数组里的数量来
指定多选框的最大选择数和最小选择数量。
相关文章推荐
- 纯css自定义radio,checkbox样式,提高用户体验
- checkboxlist 选择为空时的判断(customvalidator[用户自定义验证控件]的应用)
- 织梦自定义字段【option下拉框】【radio选项卡】【Checkbox多选框】默认值过多无法显示解决方法
- 验证用户必选CheckBox控件与自定义验证javascript代码
- 验证用户必选CheckBox控件与自定义验证javascript代码
- Android studio 自定义多选框CheckBox
- checkboxlist 选择为空时的判断(customvalidator[用户自定义验证控件]的应用):
- 自定义View(4)——用户交互、点击事件监听
- android中自定义checkbox大小和图片
- 如何自定义Tomcat Realm实现我们的用户认证需求
- Python 中的用户自定义类型
- VS2008如何使用用户自定义宏(User Macros)
- Android自定义Dialog多选对话框(Dialog+Listview+CheckBox)
- 禁止用户自定义win8开始屏幕
- 自定义拦截器用于用户登录的
- html自定义checkbox、radio、select —— checkbox、radio篇
- Oracle 用户自定义数据类型
- html自定义checkbox、radio、select —— select篇
- 查询SBO中修改OINV表的用户自定义存储过程
- android中自定义checkbox大小和图片