這些jQuery的自定義複選框器工作不正常

我想用我的網站上這些自定義的MacOSX風格的複選框（這是一個jQuery插件），但是當我檢查一個，它實際上並沒有引發$('#input').is(':checked');直到你取消選中，然後就會搞砸了。這些jQuery的自定義複選框器工作不正常

當你選中一個箱子，我添加一些CSS到被檢查以黃色背景添加到它的線。但是，我遇到了麻煩。此圖片說明它下面：

enter image description here

我不明白爲什麼它這樣做。這是我的checkIt()功能，當您檢查線路，增加了黃色背景：

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

我呼籲這個的onclick點擊複選框時。這裏是由PHP產生了一些示例標記：我想這是值得做的這個自定義複選框jQuery插件在超過<input />多餘的元素加入

<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 checkbox plugin page如果你需要看到它，他們有一大堆關於它的例子。（很明顯）我使用的是「Safari」皮膚。

來源

2011-11-19 Nathan

嘗試

$(".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/

來源

2011-11-19 03:22:24 Rafay

我會把在我的'checkIt（）'函數？ – Nathan

抱歉，我沒有在答覆中提到它，你不使用上面的代碼 – Rafay

我的PHP動態創建HTML時需要的複選框的'onClick'事件，我必須通過ID在這就是爲什麼我的功能使用'onclick'。我不喜歡使用'onclick'，但爲此我必須因爲需要傳遞的ID。 – Nathan

這些jQuery的自定義複選框器工作不正常

回答

相關問題