第A页

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页，我决定以编程方式设置checked属性（而不是像普通用户那样手动点击它）：

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

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

我有两个问题：

为什么要手动选中复选框而不切换复选框'checked'属性
什么会导致代码在一个页面上按预期工作而不是另一个？

[[编辑]]

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）似乎都承认 - 究竟是怎么回事？！

[[EDIT2]]

无效页面的标记位于：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');
    }

Answer 2

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

这种重复的后果是$('input#chk-agree').attr('checked')评估为undefined，这在Javascript中是假的。

此处的解决方案是使用不同的Id重命名两个复选框之一。例如，如果我将第一个复选框（jsFiddle的第70行）重命名为chk-remember-me，那么工作正常，我收到“确定”消息。

Answer 3

如果没有看到你的标记，我仍然愿意打赌你必须在页面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？

Answer 4

试试这个：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/

Answer 5

只需进行以下更改

第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/

Answer 6

// 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 :-)

JQuery：手动单击复选框不会更改页面上的“已检查”属性

6 个答案:

第A页

第B页

最后是剧本