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

Question

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

每当您选中一个框时，我都会在选中的行中添加一些 CSS 以为其添加黄色背景。但是，我遇到了他们的麻烦。这张图片解释如下：

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

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

当单击复选框时，我将其称为 onclick。以下是 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，如果你需要看的话，他们有很多例子。 （显然）我使用的是“Safari”皮肤。

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/