使用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