jQuery 复选框总是返回“未定义”

jQuery checkbox always returns 'undefined'

提问by pbond

Info: jQuery 1.6.0 HTML checkbox:

信息：jQuery 1.6.0 HTML 复选框：

First I've made sure jQuery is loaded with:

首先，我确保 jQuery 加载了：

if(jQuery) {
    alert("loaded");
}

And this is the case, it's loaded. Then immidiately the line after that I use:

就是这种情况，它已加载。然后立即使用我使用的行：

var returnvalue = jQuery("#mycheckbox").attr("checked");
alert(returnvalue);

This, for some reason, always alerts 'undefined'. I'm 100% sure the ID exists. I've also tried the following method:

出于某种原因，这总是警告“未定义”。我 100% 确定 ID 存在。我也试过以下方法：

jQuery("#mycheckbox").find('input[type="checkbox"]').each(function(){
    alert("foo");
    if (jQuery(this).is(":checked")) 
        ReturnVal = true;
});

But this doesn't even pop up the alert.

但这甚至不会弹出警报。

What am I doing wrong? I'm by far a jQuery or Javascript expert, but this should work... right?

我究竟做错了什么？到目前为止，我是 jQuery 或 Javascript 专家，但这应该可行……对吗？

Edit: I've tried:

编辑：我试过：

jQuery(document).ready(function() {
    alert(id);
    var returnvalue = jQuery("#" . id).prop("checked");
    alert(returnvalue);
});

The alert(id) gives me the proper ID, but alert(returnvalue) returns undefined.

alert(id) 给了我正确的 ID，但 alert(returnvalue) 返回 undefined。

I've also tried:

我也试过：

if(jQuery) { 
    alert("loaded");
} 
jQuery(function() {
    alert(id);
    var returnvalue = jQuery("#" . id).attr("checked");
    alert(returnvalue);
});

Same result

结果相同

Edit2: After using .prop AND appending the id with a '+' instead of a '.' (PHP habit), it works. Thank you all for your help!

编辑 2：使用 .prop 并在 id 后附加“+”而不是“.” （PHP习惯），它的工作原理。谢谢大家的帮助！

回答by RightSaidFred

• If you're using jQuery 1.6or later, use prop()instead of attr():

• 如果您使用 jQuery1.6或更高版本，请使用prop()代替attr()：

var returnvalue = jQuery("#mycheckbox").prop("checked");

This is because if you didn't include an explicit checkedattribute with the element, then the attribute is undefinedthough the property will have its default.

这是因为如果您没有checked在元素中包含显式属性，则该属性undefined虽然该属性将具有其默认值。

---

---

• You need to eliminate the .find():

• 您需要消除.find()：

jQuery("#mycheckbox").each(function(){
    alert("foo");
    if (jQuery(this).is(":checked")) 
        ReturnVal = true;
});

---

---

Including your HTML in the question would be helpful.

在问题中包含您的 HTML 会有所帮助。

回答by danludwig

Try this:

尝试这个：

if(jQuery) {
    alert("loaded");
}
$(function() {
    var returnvalue = $("#mycheckbox").attr("checked");
    alert(returnvalue);
});

Update

更新

If your script is at the top of the page, it executes before the HTML is loaded. During that time, attr('checked') is undefined.

如果您的脚本位于页面顶部，它会在加载 HTML 之前执行。在此期间， attr('checked') 未定义。

By wrapping the code in a self-executing anonymous function $(function(){...}), your code executes after the HTML loads.

通过将代码包装在自执行匿名函数 $(function(){...}) 中，您的代码将在 HTML 加载后执行。

Answer to comment

回复评论

Your code:

您的代码：

function isChecked(id)
{
    if(jQuery) { alert("loaded"); } 
    $(function() {
        alert(id);
        var returnvalue = $("#" + id).attr("checked"); 
        alert(returnvalue); 
    });
}

Try this. what does it alert?

尝试这个。它提醒什么？

function isChecked(id)
{
    if(jQuery) { alert("loaded"); } 
    alert(id);
    alert('there are this many elements with matching id: ' + $("#" . id).length);
    var returnvalue = $("#" + id).attr("checked"); 
    alert(returnvalue); 
}

Does the 3rd alert say "there are this many elements with matching id: 0"?

第三个警报是否说“有这么多元素与 id: 0 匹配”？

回答by danludwig

Use a .prop$('#checkbox1').prop('checked'), jQuery 1.6 +

使用.prop$('#checkbox1').prop('checked'), jQuery 1.6 +

Concerning boolean attributes, consider a DOM element defined by the HTML markup <input type="checkbox" checked="checked" />, and assume it is in a JavaScript variable named elem:

关于布尔属性，请考虑由 HTML 标记定义的 DOM 元素<input type="checkbox" checked="checked" />，并假设它位于名为 elem 的 JavaScript 变量中：

elem.checked    true (Boolean) Will change with checkbox state
$(elem).prop("checked") true (Boolean) Will change with checkbox state
elem.getAttribute("checked")    "checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6)    "checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6.1+) "checked" (String) Will change with checkbox state
$(elem).attr("checked")(pre-1.6)    true (Boolean) Changed with checkbox state

According to the W3C forms specification, the checked attribute is a boolean attribute, which means the corresponding property is true if the attribute is present at all—even if, for example, the attribute has no value or an empty string value. The preferred cross-browser-compatible way to determine if a checkbox is checked is to check for a "truthy" value on the element's property using one of the following:

根据 W3C 表单规范，checked 属性是一个布尔属性，这意味着如果该属性完全存在，则相应的属性为真——例如，即使该属性没有值或空字符串值。确定是否选中复选框的首选跨浏览器兼容方法是使用以下方法之一检查元素属性上的“真实”值：

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )

If using jQuery 1.6, the code if ( $(elem).attr("checked") )will retrieve the actual content attribute, which does not change as the checkbox is checked and unchecked. It is meant only to store the default or initial value of the checked property. To maintain backwards compatability, the .attr()method in jQuery 1.6.1+ will retrieve and update the property for you so no code for boolean attributes is required to be changed to .prop(). Nevertheless, the preferred way to retrieve a checked value is with one of the options listed above. To see how this works in the latest jQuery, check/uncheck the checkbox in the example below.

如果使用 jQuery 1.6，代码if ( $(elem).attr("checked") )将检索实际的内容属性，该属性不会随着复选框的选中和取消选中而改变。它仅用于存储已检查属性的默认值或初始值。为了保持向后兼容性，.attr()jQuery 1.6.1+ 中的方法将为您检索和更新属性，因此不需要将布尔属性的代码更改为 .prop()。尽管如此，检索选中值的首选方法是使用上面列出的选项之一。要查看它在最新的 jQuery 中是如何工作的，请选中/取消选中以下示例中的复选框。