用 jQuery 覆盖 JavaScript 中的复选框答案

【问题标题】：Overriding check box in JavaScript with jQuery用 jQuery 覆盖 JavaScript 中的复选框
【发布时间】：2011-02-21 22:41:51
【问题描述】：

帮助单元测试复选框的行为。我有这个页面：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body');
            $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body');

            $('#makeHidden').click(function() {
                var isChecked = $(this).is(':checked');

                if (isChecked) {
                    $('#displayer').hide();
                }
                else {
                    $('#displayer').show();
                }
                return false;
            });

        });

    </script>
</head>
<body>
</body>
</html>

这不起作用是因为点击处理程序中的return false;。如果我删除它，它会很好用。问题是如果我将 click 函数拉到它自己的函数中并使用 qunit 对其进行单元测试，如果没有return false;

，它将无法工作

[编辑] 使用@patrick 的回答我的结果是：

火狐：

玩具手动测试 - 好。
单元测试 - 很好。
生产应用程序的手动测试 - 很好。

Internet Explorer：

玩具手动测试 - 失败。
单元测试 - 很好。
生产应用程序的手动测试 - 失败。

Internet Explorer 最初需要单击一次。之后需要点击两次。

我认为 jQuery 是为了抽象出浏览器？

我是否必须为解决方案覆盖整个复选框行为？

在我的单元测试中，这是我对用户进行复选框模拟的方式：

$(':input[name=shipToNotActive]').removeAttr('checked');
$('#shipToNotActive').change();

还有：

$(':input[name=shipToNotActive]').attr('checked', 'checked');
$('#shipToNotActive').change();

【问题讨论】：

标签： javascript jquery checkbox qunit

【解决方案1】：

用change代替click怎么样？

$('#makeHidden').change(function() {
            var isChecked = $(this).is(':checked');

            if (isChecked) {
                $('#displayer').hide();
            }
            else {
                $('#displayer').show();
            }
            return false;
        });

return false; 不会成为阻碍，因为发生更改会触发事件。

【讨论】：

到目前为止，这在我的玩具示例中有效。现在让我用真实代码运行我的测试！
像 Firefox 中的魅力一样工作。 Firefox：玩具的手动测试 - 很好。单元测试 - 好。生产应用程序的手动测试 - 很好。 Internet Explorer：玩具的手动测试 - 失败。单元测试 - 好。生产应用程序的手动测试 - 失败。 Internet Explorer 最初需要一键单击。之后它需要点击两次。
我喜欢 IE。很抱歉，我没有头绪。修补了一段时间，不知道如何让它表现出来。

【解决方案2】：

Here is a work around.

现在我的代码是这样的：

        if ($.browser.msie) {
            $('#makeHidden').change(function () {
                this.blur();
                this.focus();
                onCheckboxClicked();
            });
        }
        else {
            $('#makeHidden').change(function() {
                return onCheckboxClicked();
            });
        }

我所有的测试，包括手工玩具和手工制作都很好。

有人有比这个 hack 更好的东西吗？

【讨论】：

+1 - 有趣的是，我最近处理了一个有点相似的 IE change 问题，除了 select 列表。该解决方案/黑客需要像您一样的本机 API blur() 和 focus()。与您的不同，该问题是 change not 第一次触发，但第二次更改（以及之后的所有更改）触发了。所以解决方案是一个 jQuery focus()，然后是一个原生的 blur() focus()。值得庆幸的是，没有必要进行浏览器检查，因为黑客只运行了一次。我正在跟踪这个作为提醒。感谢您发布您的解决方案。
问题是我的单元测试没有捕捉到问题。我认为这就是为什么你不应该测试 gui。
帮助我解决了一个问题。无论浏览器如何，我都只是发出模糊/焦点，而不是检查 IE。

【解决方案3】：

试试这个：

$(function() {
    $('<div><input type="checkbox" name="makeHidden" id="makeHidden" checked="checked" />Make Hidden</div>').appendTo('body');
    $('<div id="displayer" style="display:none;">Was Hidden</div>').appendTo('body');

    $('#makeHidden').click(function() { return onCheckboxClicked(this) } );
});

function onCheckboxClicked(el) {
    var isChecked = $(el).is(':checked');

    if (isChecked) {
        $('#displayer').hide();
    }
    else {
        $('#displayer').show();
    }
    return false;
}

【讨论】：

一直在这条路上。因为 return false 它会覆盖复选框的行为。它会一直被检查。它确实运行了点击，但随后在复选框内部重置了选中的属性。真是迟钝。发生在ie和firefox中