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

问题描述：

以下代码向调用节点添加复选框和标签。
我的问题在于label.click函数。每当标签被点击时，我想改变匹配复选框的状态。然而，会发生什么情况是复选框总是未选中。为了调试目的，我现在总是明确地将其设置为检查。为什么我的复选框总是被取消选中？

当我通过萤火虫的代码进行检查时，我看到复选框被选中，然后离开函数时它会再次被取消选中。

任何想法？

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

但是你的标签设置为复选框，这样你就不会需要检查或标签上点击时取消它 - 浏览器会为你。或者我错过了什么？ – algiecas 2009-07-16 12:05:54

好吧，还有更多事情正在进行，但这会超出问题的范围。不过你是对的。 – 2009-07-16 12:10:58

答

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

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

发生了什么事是因为你的标签设置了其for指的是正确的复选框，就可以点击时的默认操作是切换复选框。

虽然，恩，如果这就是你想要做的与你的点击处理程序，我想你甚至可以甚至不使用点击处理程序。但我不确定是否是这种情况。

答

搜索我的两个下午后把它放在左右，然后我发现我自己在几分钟之内..

显然设置复选框的ID时，在标签上的属性设置，然后返回正点击功能以某种方式使其成为虚假。通过使点击函数返回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; 
    }); 
}

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

相关推荐