最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery使用prop设置checkbox全选、反选例子
时间:2022-06-25 17:41:43 编辑:袖梨 来源:一聚教程网
大家都知道 jQuery 可通过 attr 方法来设置 dom 属性,自然的也就想到用 $(dom).attr('checked', 'checked'); 这种方法来选择 checkbox 了,但是最近在项目中使用 checkbox 全选、反选的时候,却出现了问题:
在使用 attr 方法设置选择后,点击第一次可以设置反选,第二次却不行了。
$(function(){
var checkbox = $("input[type='checkbox']");
//全选
$('#select-all').click(function(){
checkbox.attr('checked', true);
});
//反选
$('#select-reverse').click(function(){
checkbox.each(function(i, dom){
if ( $(dom).attr('checked') ) {
$(dom).removeAttr('checked');
} else {
$(dom).attr('checked', 'checked');
}
});
});
});
在查阅了一些资料后,才发现:对于jQuery 1.6.0+ 的版本,要使用prop方法来设置。
$(function(){
var checkbox = $("input[type='checkbox']");
//全选
$('#select-all').click(function(){
checkbox.prop("checked", true);
});
//反选
$('#select-reverse').click(function(){
checkbox.prop("checked", function(index, attr){
return !attr;
});
});
});
相关文章
- 无限暖暖搭乘大鸟巴士怎么玩 公测第三天每日任务做法介绍 12-27
- 奇迹暖暖绚光护佑搭配攻略 奇迹暖暖绚光护佑过关攻略 12-27
- 绝区零月城柳意像影画怎么样 12-27
- 无限暖暖翩翩愿飞去怎么样 12-27
- 黑神话悟空1.0.12.16581版本更新公告 12-27
- 光遇12.27红石碎片在哪里 12-27