why does my checkbox always get unchecked?

Question

The following code adds a checkbox and a label to the calling node.
My question lies in the label.click function. Whenever the label is clicked I want to change the state of the matching checkbox. What happens however is that the checkbox always ends up unchecked. For debugging purposes I now always explicitly set it to checked.

When I step through the code with firebug I see that the checkbox gets checked and then, when leaving the function it gets unchecked again.

Any ideas?

jQuery.fn.AddEndOrStartWith = function(selected, id, action) {
    var checkBox = $('<input type="checkbox"></input>');
    checkBox.attr("id", id + action);
    checkBox.addClass(action + "CheckBox");
    checkBox.attr("for", id);

    var label = $('<label></label>');
    label.attr("for", id + action);

    if (selected) {
        checkBox.attr("checked", "checked");
        label.addClass("lockerClosed");
    } else {
        label.addClass("lockerOpen");
    }

    $(this).append(label);
    $(this).append(checkBox);

    label.click(function() {
        /*alert(checkBox.attr("checked"));*/
        checkBox.attr("checked", "checked");
        /*return true;*/
        /*alert(checkBox.attr("checked"));*/
    });
}

But your label is set FOR the checkbox, so you don't need to check or uncheck it when clicking on label - browser does it for you. Or i'm missing something? — algiecas, Jul 16 '09 at 12:05
Well, there's more going on but that would go outside the scope of the question. You are right though. — Boris Callens, Jul 16 '09 at 12:10

score 5 · Accepted Answer · answered Jul 16 '09 at 12:02

5

You need to prevent the default action in your label click handler. Think this should do it:

label.click(function() {
     checkBox.attr("checked", "checked");
     return false;
});

What's going on is that because your label is set up with its for referring to the checkbox correctly, the default action when clicking on it is to toggle the checkbox.

Though, um, if that's all you're trying to do with your click handler, I guess you could just not even use a click handler. But I'm not sure whether that's the case.

answered Jul 16 '09 at 12:02

chaos

122,029
33
303
309

Yep, I found it out too. Byt you actually knew why :) – Boris Callens Jul 16 '09 at 12:08
Well, no, there's more going on but that was not really relevant for the question. – Boris Callens Jul 16 '09 at 12:10

score 0 · Answer 2 · answered Jul 16 '09 at 12:08

After two afternoons of searching I put it on SO and then within a few minutes I found it myself..

Apparently when setting the id of the checkbox, setting the for attribute on the label and then returning positive on the click function somehow makes it false. By making the click function return false, I break the cycle without invalidating my HTML.

Final code:

jQuery.fn.AddEndOrStartWith = function(selected, id, action) {
    var checkBox = $('<input type="checkbox"></input>');
    checkBox.attr("id", id + action);
    checkBox.addClass(action + "CheckBox");

    var label = $('<label></label>');
    label.attr("for", id + action);

    if (selected) {
        checkBox.attr("checked", "checked");
        label.addClass("lockerClosed");
    } else {
        label.addClass("lockerOpen");
    }

    $(this).append(label);
    $(this).append(checkBox);

    label.click(function() {
        checkBox.attr("checked", !checkBox.attr("checked"));
        return false;
    });
}

why does my checkbox always get unchecked?

2 Answers2

Linked