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

时间:2022-11-28 20:47:52

I've been trying to figure out how to add the attribute "checked" to a checkbox on click. The reason I want to do this is so if I check off a checkbox; I can have my local storage save that as the html so when the page refreshes it notices the checkbox is checked. As of right now if I check it off, it fades the parent, but if I save and reload it stays faded but the checkbox is unchecked.

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

I've tried doing $(this).attr('checked'); but it does not seem to want to add checked.

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

EDIT: After reading comments it seems i wasn't being clear. My default input tag is:

编辑:看完评论后,似乎我不清楚。我的默认输入标记是:

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

I need it top be so when I click the checkbox, it adds "checked" to the end of that. Ex:

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

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

I need it to do this so when I save the html to local storage, when it loads, it renders the checkbox as 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');
}
});

4 个解决方案

#1


23  

It seems this is one of the rare occasions on which use of an attribute is actually appropriate. jQuery's attr() method will not help you because in most cases (including this) it actually sets a property, not an attribute, making the choice of its name look somewhat foolish. [UPDATE: Since jQuery 1.6.1, the situation has changed slightly]

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

IE has some problems with the DOM setAttribute method but in this case it should be fine:

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

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

In IE, this will always actually make the checkbox checked. In other browsers, if the user has already checked and unchecked the checkbox, setting the attribute will have no visible effect. Therefore, if you want to guarantee the checkbox is checked as well as having the checked attribute, you need to set the checked property as well:

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

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

To uncheck the checkbox and remove the attribute, do the following:

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

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

#2


28  

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

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

just attr( 'checked' ) will return the value of $( this )'s checked attribute. To set it, you need that second argument. Based on <input type="checkbox" checked="checked" />

只是attr('checked')将返回$(this)的checked属性的值。要设置它,您需要第二个参数。基于

Edit:

编辑:

Based on comments, a more appropriate manipulation would be:

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

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

And a straight javascript method, more appropriate and efficient:

而直接的javascript方法,更合适,更有效:

this.checked = true;

Thanks @Andy E for that.

谢谢@Andy E。

#3


6  

If .attr() isn't working for you (especially when checking and unchecking boxes in succession), use .prop() instead of .attr().

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

#4


1  

use this code

使用此代码

var sid = $(this);
sid.attr('checked','checked');

#1


23  

It seems this is one of the rare occasions on which use of an attribute is actually appropriate. jQuery's attr() method will not help you because in most cases (including this) it actually sets a property, not an attribute, making the choice of its name look somewhat foolish. [UPDATE: Since jQuery 1.6.1, the situation has changed slightly]

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

IE has some problems with the DOM setAttribute method but in this case it should be fine:

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

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

In IE, this will always actually make the checkbox checked. In other browsers, if the user has already checked and unchecked the checkbox, setting the attribute will have no visible effect. Therefore, if you want to guarantee the checkbox is checked as well as having the checked attribute, you need to set the checked property as well:

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

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

To uncheck the checkbox and remove the attribute, do the following:

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

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

#2


28  

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

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

just attr( 'checked' ) will return the value of $( this )'s checked attribute. To set it, you need that second argument. Based on <input type="checkbox" checked="checked" />

只是attr('checked')将返回$(this)的checked属性的值。要设置它,您需要第二个参数。基于

Edit:

编辑:

Based on comments, a more appropriate manipulation would be:

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

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

And a straight javascript method, more appropriate and efficient:

而直接的javascript方法,更合适,更有效:

this.checked = true;

Thanks @Andy E for that.

谢谢@Andy E。

#3


6  

If .attr() isn't working for you (especially when checking and unchecking boxes in succession), use .prop() instead of .attr().

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

#4


1  

use this code

使用此代码

var sid = $(this);
sid.attr('checked','checked');