这些jQuery自定义复选框无法正常工作

Question

我正在尝试在我的网站上使用这些自定义MacOSX样式的复选框（它是一个jQuery插件），但当我检查一个时，它实际上并没有触发$('#input').is(':checked');直到你取消选中然后它搞砸了。

无论何时选中一个方框，我都会在检查的行中添加一些CSS，以便为其添加黄色背景。但是，我遇到了麻烦。此图片解释如下：

我不明白为什么会这样做。这是我的checkIt()函数，当您检查一行时会添加黄色背景：

function checkIt(id) {
    if ($('#checkbox_' + id).is(':checked')) {
        $('#' + id).addClass("selected");
    }
    else {
        $('#' + id).removeClass("selected");
    }
}

单击复选框时，我会调用此方法。以下是PHP生成的一些示例标记：

<span class="inbox_check_holder">
<input type="checkbox" value="96874" onclick="checkIt(96874)" id="checkbox_96874" class="inbox_check" />
<div class="star_clicker" id="star_96874" onclick="addStar(96874)" title="Not starred"><span id="starimg_96874" class="not_starred"></span></div>
</span>

我认为这与自定义复选框jQuery插件有关，在<input />上添加了额外的元素。

如果您需要查看jQuery checkbox plugin page，这里有大量示例。 （显然）我正在使用＆＃34; Safari＆＃34;皮肤。

Answer 1

尝试

$(".inbox_check").live("change",function(e){
e.stopPropagation();
if($(this).is(":checked"))
 $('#' + id).addClass("selected");
else
 $('#' + id).removeClass("selected");
});

http://jsfiddle.net/BXjg7/3/

使用jquery 1.7，您可以使用on

$("body").on("change", ".inbox_check", function(e){
        e.stopPropagation();
    if($(this).is(":checked"))
     $('#' + id).addClass("selected");
    else
     $('#' + id).removeClass("selected");
});

http://jsfiddle.net/BXjg7/10/

delegate示例

$("body").delegate(".inbox_check","change", function(e){
e.stopPropagation();  
    if($(this).is(":checked"))
     $('#' + id).addClass("selected");
    else
     $('#' + id).removeClass("selected");
});

http://jsfiddle.net/BXjg7/15/