项目过程需要使用 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的效果。
上面是我的一点点小经验, 各位大佬如果有更好的方法可以一起交流沟通。 嫌弃的也别喷别吐。
人嘛 ,开心就好。