Javascript 在单击 jquery 时添加属性“已检查”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3408150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 04:30:26  来源:igfitidea点击:

Add attribute 'checked' on click jquery

javascriptjqueryhtmllocal-storage

提问by MoDFoX

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');
}
});

回答by hookedonwinter

$( 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 ) 的检查属性的值。要设置它,您需要第二个参数。基于<input type="checkbox" checked="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 Efor that.

感谢@安迪Ë了点。

回答by Tim Down

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 setAttributemethod but in this case it should be fine:

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

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 checkedattribute, you need to set the checkedproperty 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;

回答by charliepark

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

如果.attr()不适合您(尤其是在连续选中和取消选中复选框时),请使用.prop()代替.attr()

回答by user1948368

use this code

使用此代码

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