Question

以下代码为主叫节点添加了一个复选框和一个标签我的问题在于label.click函数。无论何时单击标签，我都想更改匹配复选框的状态。然而，会发生的事情是复选框始终未选中。出于调试目的，我现在总是明确地将其设置为选中。

当我使用firebug逐步执行代码时，我看到复选框已被检查，然后，当离开该函数时，它再次被取消选中。

有什么想法吗？

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"));*/
    });
}

Answer 1

您需要阻止标签点击处理程序中的默认操作。认为这应该这样做：

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

正在发生的事情是因为您的标签设置时for正确地引用了复选框，点击它时的默认操作是切换复选框。

虽然，嗯，如果您正在尝试使用点击处理程序，我猜您甚至不能使用点击处理程序。但我不确定是否是这种情况。

Answer 2

经过两个下午的搜索，我把它放在SO上然后在几分钟内我自己发现了..

显然，当设置复选框的id时，在标签上设置for属性然后在click函数上返回positive会以某种方式将其设置为false。通过使click函数返回false，我打破了循环而不会使我的HTML无效。

最终代码：

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;
    });
}

为什么我的复选框总是被取消选中？

2 个答案: