jquery選擇器複選框

我的頁面比較複雜，我相當肯定它的jquery表現怪異。所以我會先添加相關內容，如果有人需要更多信息，請告訴我，我會提供。jquery選擇器複選框

前提是有一個存放關鍵字氣泡的div。這些泡泡有一個工具提示（qTip插件），可以選擇和取消選擇相關信息。有時候關鍵字有重疊的相關信息，因此當一個關鍵信息被取消時，所有其他信息都需要同時取消選擇。這個氣泡列表是通過ajax動態構建的，並且可以繼續添加到實況頁面上。

問題是，當我點擊它們時，某些複選框不會取消選中，但如果我點擊另一個工具提示中的相同工具提示，它現在可以讓原始工作正常。我不知道爲什麼有些工作和其他人不工作。我認爲它與寫入實時onlick函數綁定和/或選擇器的方式有關。

下面的函數基於json對象寫入工具提示的html內容，所以假設內容在那裏。底部的jquery代碼是我綁定到複選框的函數。

function constructSpecializationsHTML(data){ 
    var html = ''; 
    for(i = 0; i < data.specializations.length; i++){ 
     if(data.specializations[i].name != ''){ 
      html += "<span class='is-specialization-line'>"; 
      html +=  "<input class='is-specialization-checkbox' type='checkbox' name='" + data.specializations[i].name + "' checked='" + isSpecializationChecked(data.specializations[i].name) + "'/>"; 
      html +=  "<span>" + data.specializations[i].name + "</span>"; 
      html += "</span><br />"; 
     } else { 
      html += "This keyword is not known in our ontology"; 
     } 
    } 
    return html; 
} 

$(document).on("click", ".is-specialization-checkbox", function(){ 
    var $checkboxs = $(".is-specialization-checkbox[name='" + $(this).attr("name") + "']") 
    $checkboxs.prop("checked", !$checkboxs.prop("checked")); 
});

來源

2012-05-30 Tony

爲什麼你不使用單選按鈕，它本身就是這樣做的？ – Pointy

可能是因爲你不能取消選中一個單選按鈕... – ahren

你可以選擇多個，所以這個列表不是互斥的 – Tony

首先，點擊事件觸發時，「checked」屬性已被更改，這意味着您的複選框的狀態不同。

更改

!$checkboxs.prop("checked")

要

$(this).prop("checked")

解決了。

其次，當您只顯示一個工具提示時，您的選擇只返回一個複選框。如果在檢查或取消選中之前顯示所有工具提示，則返回正確的編號。我的猜測是qTip不會將工具提示的html添加到DOM，直到它被顯示。這就是爲什麼不是所有類似的名稱複選框都沒有選中（至少我認爲就是這樣）

來源

2012-05-30 22:33:38 Andy

優秀，第一部分完美工作。我喜歡邏輯的簡單性。第二部分最終也是正確的問題。在我意識到我剛剛添加了$（'。is-keyword-container a'）之後，qtip（'render'）;在創建完畢後立即呈現qtip，現在它全部正常工作。謝謝！ – Tony

太棒了。很高興幫助:-) – Andy

$(document).on("click", ".is-specialization-checkbox", function(){ 
    var $checkboxs = $(".is-specialization-checkbox[name='" + $(this).attr("name") + "']") 
    $checkboxs.not($(this)).prop("checked", false); 
});

改變this到$(this) - 這樣，它是被點擊，這是獲得排除在取消選擇特定的複選框。

來源

2012-05-30 21:43:40 ahren

雖然這確實消除了無法取消選中某些複選框，但現在不會取消選中其他類似項目在其他工具提示中。 – Tony

你有這個jsFiddle嗎？ – ahren

我現在要做。這是上面編輯的鏈接http://jsfiddle.net/yQLaw/3/ – Tony

jquery選擇器複選框

回答

相關問題