1

我遇到了一个相当奇怪的行为。我有两个页面（我们称它们为页面 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. 为什么手动检查复选框不切换复选框“已选中”属性
  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/

我将非常有兴趣找出导致它在此页面上不起作用的原因。

4

6 回答 6

2

使用固定代码查看此版本的JsFiddle它包含两个更改。具有唯一 ID 的复选框和已检查元素的正确 jquery 代码

if ($('input#chk-agree').is(':checked')) {
        alert('ok');
    }
    else {
        alert('Please accept our terms and conditions before continuing');
    }
于 2013-01-26T23:19:32.730 回答
1

您的问题似乎是由重复的chk-agreeID 引起的。我想知道这是否可能是复制/粘贴错误：第一个chk-agree复选框用作“记住我”功能的一部分。

这种重复的结果是$('input#chk-agree').attr('checked')计算结果为undefined，这在 Javascript 中是错误的。

这里的解决方案是用不同的 ID 重命名两个复选框之一。例如，如果我将第一个复选框（jsFiddle 的第 70 行）重命名为chk-remember-me，则一切正常，我会收到“OK”消息。

于 2013-01-26T07:43:22.330 回答
0

在没有看到您的标记的情况下，我仍然愿意打赌您必须在页面 A 和页面 B 之间存在一些小的差异。您是否尝试过备份文件，并将 A 中的标记替换为 B 中的标记？因为没有理智的理由为什么两个单独的 HTML 页面上的完全相同的代码会以不同的方式工作。

对我来说，这个标记：

<input type="checkbox" id="testbox"  value="check me"/> 
<input type="button" id="testbutton" value="click me" />

这个js：

$("#testbutton").click(function() {
    if ($("#testbox").attr("checked")) {
        alert("Checked");
    }
    else {
        alert("Not Checked");
    }
});

在我尝试过的每个浏览器中都可以正常工作。另外，您使用的是什么版本的 jQuery？

于 2013-01-20T11:11:08.697 回答
0

试试这个：http: //jsfiddle.net/Gsxfz/

 $('#signup-button').click(function (e) { <-- its an '<a>'
   if (!$('#chk-agree:checked').length) {// <--check for the length of checked checkboxes
     alert('Please accept our terms and conditions before continuing');
   } else {
     alert('ok');
   }
    e.preventDefault();
});

您可以查看小提琴http://jsfiddle.net/Gsxfz/

于 2013-01-20T11:12:09.540 回答
0

只需进行以下更改

页面 A

 <input type="checkbox" id="chk-agree-pageA"> // checkbox ID

 <button type="submit" class="btn btn-success signup" id="pageA">Sign In</button>

B页

<input type="checkbox" id="chk-agree-pageB"> // checkbox ID

 <button type="submit" class="btn btn-success signup" id="pageB">Sign In</button>

最后是脚本

$('button.signup').click(function(){
        var id = $(this).attr('id');
        if ($('input#chk-agree-'+id).is(':checked')) {
           alert('ok');
        }
        else {
            alert('Please accept our terms and conditions before continuing');

        }
    });    
});

检查这个小提琴http://jsfiddle.net/SrRAS/25/

于 2013-01-30T13:11:00.240 回答
0 
// this will alert you that you have duplicate ids on the page

if($('input#chk-agree').size()>1) {
    alert('you have duplicate ids on this page');
}


// this will fix your problem in jsfiddle:

if (!$('input#chk-agree')[1].checked) {

    alert('Please accept our terms and conditions before continuing');
}
else {
        alert('ok');
}

// but removing the first duplicate id is the right fix :-)
于 2013-01-30T22:08:17.433 回答