Overriding check box in JavaScript with jQuery

Help with unit testing checkbox behavior. I have this page:

<!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>

This doesn't work it is because of the return false; in the click handler. If I remove it it works great. The problem is if I pull the click function out into it's own function and unit test it with qunit it will not work without the return false;

[EDIT] Using @patrick's answer my results are:

Firefox:

Manual test of toy - good.
Unit Tests - good.
Manual test of production app - good.

Internet Explorer:

Manual test of toy - fail.
Unit Tests - good.
Manual test of production app - fail.

Internet Explorer requires initially, one-click. after that it requires two clicks.

I thought jQuery is to abstract away browsers?

Am I going to have to override the entire check box behavior for a solution?

In my unit tests this is how I am doing the check box simulation of a user:

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

and also:

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

How about using change instead of click?

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

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

The return false; won't be in the way since the event is fired as a result of the change having occurred.

Here is a work around.

Now my code is like this:

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

All my tests including manual toy and manual production are good.

Anybody have something better than this hack?

Try this:

$(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;
}

来源：https://stackoverflow.com/questions/2875236/overriding-check-box-in-javascript-with-jquery

标签

javascript

jquery

checkbox

qunit