.checked=true 不适用于 jquery $ 函数答案

【问题标题】：.checked=true not working with jquery $ function.checked=true 不适用于 jquery $ 函数
【发布时间】：2010-07-26 12:55:08
【问题描述】：

我想在单击按钮时选择一个复选框。

<form action="" method="post" id="form2">
    <input type="checkbox" id="checkone" value="one" name="one" />
    <input type="button" value="Click me" id="buttonone"/>
</form>

当我尝试以下操作时，复选框没有被选中

$('#buttonone').click(function() {
    $('#checkone').checked=true;
});

然后我尝试了：

$('#buttonone').click(function() {
    document.getElementById('checkone').checked=true;
});

这次复选框被选中。为什么不使用 jquery $ 函数选择它？

【问题讨论】：

@illarra - 这不是最好的方法，这是 jQuery 新手快速但不能有效解决问题的最佳方法问题...而且该链接根本没有回答问题。他问为什么.checked = true 不在这里工作？...我完全没有看到这一点，我怀疑你会在 10 秒内在 google 上找到答案。跨度>
你是对的@Nick Craver，我在这里误解了问题的第二部分。我试图撤消我的 -1 但现在不能。 @Anurag 的回答很清楚。
@illarra - 已编辑，现在发布您的投票 :)

标签： javascript jquery html forms properties

【解决方案1】：

试试

$('#checkone').attr('checked', true);

或

$('#checkone').get(0).checked = true;

或

$('#checkone')[0].checked = true; // identical to second example

您的第一个代码不起作用的原因是因为您试图在 jQuery 对象上设置 checked 属性，因为它仅适用于本机 DOM 对象，所以没有可见效果。

通过调用get(0) 或访问第一项[0]，我们检索到本机DOM 元素并可以正常使用它，就像您的第二个示例一样。或者，使用 jQuery 的 attr 函数设置 checked 属性，它也应该可以工作。

【讨论】：

@anish - 添加了解释，如果仍然不清楚，请告诉我，我会进一步详细说明
@Anurag - 非常感谢。很好的解释。这适用于 javascript 的所有属性和方法吗？
+1，但我真的不喜欢attr() 版本。它效率低下，更容易出错，并且使属性和属性的混淆永久化。
@anish - 是的，对象属性和 DOM 属性之间存在很大差异。 jQuery 有时会模糊这种区别，无法辨认。 @Tim - 最近我一直在发展这样一种观念，即 DOM 中的整个属性/属性都是一团糟。我的意思是为什么不让属性与属性同义。在大多数情况下，setAttribute(.., ..) 将更新 property，但反之亦然。老实说，我认为从一开始就将属性视为不与初始属性同步的工作副本在概念上是错误的，但这只是我的看法。
这个对我有用：$('#checkone')[0].checked = true;非常感谢你！第一个 on 将其设置为 on

【解决方案2】：

你需要使用.attr()作为jQuery对象，像这样：

$('#buttonone').click(function() {
  $('#checkone').attr('checked', true);
});

但最好使用 DOM 方式，像这样：

$('#buttonone').click(function() {
  $('#checkone')[0].checked = true; //get the DOM element, .checked is on that
});

或者，完全没有 jQuery：

document.getElementById('buttonone').onclick = function() {
  document.getElementById('checkone').checked = true;
};

【讨论】：

第二个例子突出了这个问题。 jQ 新手有时会忘记他们正在使用 jQ 对象，而不是 DOM 对象。
@jasongetsdown - jQ 新手有时会忘记他们正在使用 jQ 对象，而不是 DOM 对象。不错的提示。 @Nick Craver - 为什么是 $('#checkone')[0].checked = true;更好一些了。这会让它执行得更快吗？
@anish-m - 是的，它的性能明显优于 .attr()...访问 DOM 属性总是比通过其他方式访问它。
访问 DOM 属性总是比通过其他方式访问它要快。非常感谢您的信息

【解决方案3】：

这些答案都不适合我，因为我错误地拥有多个具有相同名称属性的收音机：

<div id="group-one">
  <input type="radio" name="groups" value="1" checked="checked" />
  <input type="radio" name="groups" value="2" />
</div>
<div id="group-two">
  <input type="radio" name="groups" value="1" checked="checked" />
  <input type="radio" name="groups" value="2" />
</div>

Javascript 无法识别选中的属性（显然）。这是使用include 多次添加相似的HTML 部分的结果。显然，单击单选按钮将取消选中同名的单选开关。

这是一个 jsfiddle，显示两个单选元素可以具有属性 checked 但实际上只检查了最后一个：

http://jsfiddle.net/bozdoz/5ecq8/

同样，非常明显，但可能需要注意：从您打算多次包含到其他文件中的文件中删除 id 和 name 属性。

【讨论】：

【解决方案4】：

试试

$('#checkone').attr('checked', true);

您无法直接访问 DOM 对象属性，因为 jQuery 对集合进行操作（$(selector) 是一个数组）。这就是您定义函数来操作返回元素的内容的原因。

【讨论】：

【解决方案5】：

试试

$('#checkone').attr('checked', true);

用谷歌搜索“jquery check a checkbox”是要走的路

【讨论】：

【解决方案6】：

或者你可以这样做

$('#buttonone').click(function() {
    $('#checkone')[0].checked=true;
});

这是因为“.checked”不是 jQuery 的一部分，而您正试图在 jQuery 对象上使用它。如果您在 [0] 处索引 jQuery 对象，您将获得存在“.checked”的原始 Javascript 对象。

【讨论】：

【解决方案7】：

试试这个

    $('#buttonone').click(function() {
  $('#checkone').prop('checked', true);
});

【讨论】：