JQuery:手动单击复选框不会更改页面上的 'checked' 属性

Question

我遇到了一个相当奇怪的行为。我有两个页面(我们称之为页面 A 和 页面 B)，两个页面都包含以下 javascript 代码:

<script type="text/javascript">
$(document).ready(function(){
    $('a > img.id-provider, #signup-button').click(function(e){
        if (!$('#chk-agree').attr('checked')) {
            alert('Please accept our terms and conditions before continuing');
        }
        else {
            alert('ok');
        }
        e.preventDefault();
    });
});
</script>

该页面可在此处查看:http://jsfiddle.net/SrRAS/

在页面 B 上，行为符合预期，即在单击注册按钮之前未选中复选框时会发出警告。

但是，在页面 A 上，即使手动单击复选框以使其选中，也始终会显示警告。

当我试图了解发生了什么时，这是 FF 控制台输出(两个页面):

>>> $('#chk-agree').attr('checked')
undefined
>>> $('input#chk-agree').attr('checked')
undefined

最终，在页面 A 上，我决定以编程方式设置选中的属性(而不是像普通用户那样手动单击它):

>>> $("input#chk-agree").click()
jQuery(input#chk-agree, input#chk-agree)
>>> $("input#chk-agree").attr('checked')
"checked"

当我点击页面 A 上的注册按钮时，它按预期工作(显示“确定”消息)。但是，当我手动取消选中页面 A 上的复选框时，它仍然继续显示“确定”消息。因此，似乎出于某种原因，在页面 A 上，手动单击复选框不会切换“已检查”属性。

我有两个问题:

1. 为什么手动检查复选框没有切换复选框的“checked”属性
2. 什么会导致代码在一个页面上按预期工作，而不是在另一个页面上按预期工作？

[[编辑]]

I have also tried the following check instead of the one shown in my snippet above:

if (!$(this).is(':checked')/*!$('#chk-agree').attr('checked')*/) {
   ...
}else {
   ...
}

现在，至少两个页面的行为是一致的，没有一个页面(A 或 B) 似乎承认手动单击复选框 - 到底发生了什么？ !

[[编辑2]]

无效页面的标记位于:http://jsfiddle.net/SrRAS/

我非常有兴趣找出导致它无法在此页面上运行的原因。

Answer 1

查看此版本的 JsFiddle with Fixed code它包含两个更改。具有唯一 ID 的复选框以及选中元素的正确 jquery 代码

if ($('input#chk-agree').is(':checked')) {
        alert('ok');
    }
    else {
        alert('Please accept our terms and conditions before continuing');
    }