javascript - 这些 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>

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

这是 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/