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

Posted 2023-03-05

【中文标题】在单击 jquery 时添加属性“已检查”

【英文标题】：Add attribute 'checked' on click jquery

【发布时间】：2011-03-25 09:39:33

【问题描述】：

我一直在试图弄清楚如何在单击时将“选中”属性添加到复选框。我想这样做的原因是，如果我选中一个复选框；我可以让我的本地存储将其保存为 html，因此当页面刷新时，它会注意到复选框已选中。截至目前，如果我选中它，它会使父级淡出，但如果我保存并重新加载它会保持淡化但未选中复选框。

我试过 $(this).attr('checked');但是好像不想加checked。

编辑： 阅读 cmets 后，我似乎并不清楚。 我的默认输入标签是：

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

);

【参考方案1】：

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

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

编辑：

基于 cmets，更合适的操作是：

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

而且是直接的javascript方法，更合适更高效：

this.checked = true;

感谢@Andy E。

【讨论】：

由于 jQuery 将属性映射到 DOM 属性的方式，$(this).attr('checked', true); 更合适。 this.checked = true; 更合适，效率更高。

@[Andy E] 太酷了。不知道。编辑我的答案以反映。

@hookedonwinter：根据您的更新，我认为不投票是不礼貌的；）+1。

感谢您的回答，但这似乎并不想将“已选中”属性添加到我的复选框中。看来我可以做任何其他事情，“'val'，true”等。但是'checked'，true不想添加它。

您能详细说明一下吗？也许您可以使用您所拥有的 javascript 代码示例来编辑您的问题。

【参考方案2】：

这似乎是使用属性实际上合适的少数情况之一。 jQuery 的attr() 方法对你没有帮助，因为在大多数情况下（包括这个）它实际上设置了一个属性，而不是一个属性，这使得选择它的名字看起来有些愚蠢。 [更新：从 jQuery 1.6.1 开始，the situation has changed slightly]

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;

【讨论】：

我喜欢你在这里的东西，但 OP 确实要求使用 jQuery。但是，对于直接 js，+1。很高兴在学习框架之前了解核心。

好吧，我不确定 jQuery 是否真的这样做了。不过可能是错的。

感谢您的帮助，直接 javascript 对我来说绝对没问题，我刚刚使用 jquery，所以我想我会问。再次感谢您的帮助。

【参考方案3】：

如果.attr() 不适合您（尤其是在连续选中和取消选中复选框时），请使用.prop() 而不是.attr()。

【讨论】：

你的答案是最好的（恕我直言）。函数 .attr() 只是添加属性，但不更新复选框的状态。 .prop() - 帮助我解决了我的问题。

【参考方案4】：

使用此代码

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

【参考方案5】：

一个简单的答案是在复选框中添加checked 属性：

$('input[id='+$(this).attr("id")+']').attr("checked", "checked");