在单击jquery上添加属性'checked'

Question

我一直试图弄清楚如何将"已检查"属性添加到单击复选框.我想要这样做的原因是,如果我勾选一个复选框; 我可以将我的本地存储保存为html,因此当页面刷新时会通知复选框已选中.截至目前,如果我检查它,它会淡化父,但如果我保存并重新加载它保持褪色但复选框未选中.

我试过做$(this).attr('checked'); 但它似乎不想添加已检查.

编辑:阅读评论后,似乎我不清楚.我的默认输入标记是:

<input type="checkbox" class="done">

我需要它顶部是这样当我单击复选框时,它添加"已检查"到结尾.例如:

<input type="checkbox" class="done" checked>

我需要它来这样做所以当我将html保存到本地存储时,当它加载时,它会将复选框呈现为已选中.

$(".done").live("click", function(){
if($(this).parent().find('.editor').is(':visible') ) {
var editvar = $(this).parent().find('input[name="tester"]').val();
$(this).parent().find('.editor').fadeOut('slow');
$(this).parent().find('.content').text(editvar);
$(this).parent().find('.content').fadeIn('slow');
}
if ($(this).is(':checked')) {
$(this).parent().fadeTo('slow', 0.5);
$(this).attr('checked'); //This line
}else{

$(this).parent().fadeTo('slow', 1);
$(this).removeAttr('checked');
}
});

Answer 1

$( this ).attr( 'checked', 'checked' )

只会attr( 'checked' )返回$(this)的checked属性的值.要设置它,您需要第二个参数.基于<input type="checkbox" checked="checked" />

编辑:

根据评论,更合适的操作将是:

$( this ).attr( 'checked', true )

和一个直接的JavaScript方法,更合适和有效:

this.checked = true;

感谢@ 安迪Ë了点.

Answer 2

这似乎是少数几个使用属性实际上合适的场合之一.jQuery的attr()方法不会帮助你,因为在大多数情况下(包括这个)它实际上设置了一个属性,而不是一个属性,使得它的名字选择看起来有些愚蠢.[更新:自jQuery 1.6.1以来,情况略有改变 ]

IE有一些DOM setAttribute方法的问题,但在这种情况下应该没问题:

this.setAttribute("checked", "checked");

在IE中,这将始终实际选中复选框.在其他浏览器中,如果用户已经选中并取消选中该复选框,则设置该属性将没有可见效果.因此,如果要保证选中复选框以及具有checked属性,则还需要设置checked属性:

this.setAttribute("checked", "checked");
this.checked = true;

要取消选中该复选框并删除该属性,请执行以下操作:

this.setAttribute("checked", ""); // For IE
this.removeAttribute("checked"); // For other browsers
this.checked = false;

Answer 3

如果.attr()不适合您(特别是在连续检查和取消选中框时),请使用.prop()而不是.attr().