使用checkbox实现单选效果 (模拟radio)
来源:互联网 发布:webaccess组态软件 编辑:程序博客网 时间:2024/05/20 04:28
项目过程需要使用 radio 进行单选, 但是客户需要的是checkbox的样式(生成pdf表单进行打印,大家都知道,日常填的表都是方块打勾。)
于是想到用Jquery控制checkbox 来模拟radio 的效果。
代码如下
$(':checkbox[type="checkbox"]').each(function(){ $(this).click(function(){ if($(this).attr('checked')){ $(':checkbox[type="checkbox"]').removeAttr('checked'); $(this).attr('checked','checked'); alert(this.id); } }); });
通过上面的js 脚本, 既可以实现checkbox 拥有实现radio效果
但是贴到页面,发现现实果然可怕, 不管checkbox的name属性是什么, 整个页面的input type = ‘checkbox’ 都是属于一个组 。点击第一个,最后一个就unchecked。 name? 于是对上面的代码进行了修改
$(':checkbox[type="checkbox"]').each(function(){ $(this).click(function(){ if($(this).attr('checked')){ $(':checkbox[type="checkbox"][name='+$(this).attr("name")+']').removeAttr('checked'); $(this).attr('checked','checked'); } }); });
在原来的代码的基础上,判断条件进行进一步的筛选。 checked 的同时, 还需要name 属性和 选中的name属性一致的才会取消选中。 这样就可以成功模拟了radio的效果。
上面是我的一点点小经验, 各位大佬如果有更好的方法可以一起交流沟通。 嫌弃的也别喷别吐。
人嘛 ,开心就好。
阅读全文
0 0
- 使用checkbox实现单选效果 (模拟radio)
- 模拟 html radio 的单选效果
- js/jquery模拟radio单选效果
- GridView实现checkbox效果(单选效果)
- 实现radio取消功能及checkbox单选
- checkbox实现单选按钮效果
- input:checkbox多选框实现单选效果
- checkbox 实现单选效果(html)
- 用CheckBox实现ListView单选效果
- ListView+CheckBox实现单选效果
- checkbox多选框实现单选效果
- RecyclerView之CheckBox实现单选效果
- [ATL/WTL]_[中级]_[原生的复选框(checkbox button)和单选按钮(radio button)实现透明背景效果解决方案]
- 使用系统自带CheckBox实现单选效果的2个线性布局切换
- ListView + CheckBox实现单选、多选效果
- 使用CheckBox实现多选效果
- 不想用radio来控制单选,那就来看看checkbox实现的单选吧
- 使用easyui框架form控件,单选按钮radio或复选框checkbox样式问题
- 研究了42份招聘要求后,我发现这样的产品经理最受欢迎
- 京东618和双十一,我如何做好京东旗舰级营销活动(附诀窍)
- 大数据为什么对人们来说如此重要?
- 如何让一款没什么差异的产品,从“好”变成“更好”?
- Spring Boot 文件上传实例
- 使用checkbox实现单选效果 (模拟radio)
- JS学习
- Spring boot事务管理只异常不回滚的解决方案
- 树莓派上做人脸识别
- 电商秒杀架构 各个具体场景及对应的解决方案
- C++中的前置声明(Forward Declaration)
- xmysql:可为MySql生成REST API的神奇命令
- C++存储数据结构之四map
- 恢复Reflector反编译后资源文件的办法