jQuery可搜索的複選框列表和三態複選框

Question

我正在構建一個簡單的asp頁面，我在其中列出了每個名稱左側的複選框列表。 我已經成功地創建一個簡單的jQuery腳本，讓隱藏和顯示基於輸入錶行： http://jsfiddle.net/Tq97v/（第一部分）

，你可以看到我可以輸入名稱的一部分，然後特定行被隱藏。 使用紅色「x」我可以取消選中所有複選框。

我現在要做的是將靜態紅色「x」改成三態複選框。 不知道如何開始。

我是否必須將更改偵聽器添加到列表中的每個複選框？

第二件事 - 如何在網站上創建同一個「插件」的多個實例。 現在我通過它來識別輸入，但是將該輸入作爲參數調用函數會很好，並且在輸入之後將會罰用表並創建必要的邏輯。 這樣我可以在頁面上多次調用函數以擁有多個列表。

我不是爲整個解決方案要求（當然它始終是歡迎的），但我需要的是知道如何以有效的方式做到這一點，並優化的可能，因爲有時我的列表中有500多個元素。

P.S.不要看HTML代碼，它是ASP生成的。

---

我發現這個插件：https://github.com/bcollins/jquery.tristate，但我不知道怎麼跟我的列表中使用它。

---

UPDATE：

我已經成功地把我的代碼到功能，但現在我必須呼籲每個列表3種功能。
這是我的更新代碼：http://jsfiddle.net/65MEV/4/
我該如何將它更改爲一個功能？它會更好嗎？
這是我更新的代碼。仍在考慮如何做不確定複選框而不是刪除圖像。

UPDATE2

我建立工作代碼:)
http://jsfiddle.net/65MEV/9/
不過，我想盡可能地改進它。
歡迎任何建議！

Answer 1

一個三態複選框就像三個入口設備：一個錯覺。

你真正想要的是使複選框indeterminate（通過設置相同名稱的屬性爲true）。要實現這一點，你需要在每一個複選框change（或click）處理器，那麼你就需要檢查，如果所有的人都在同一個國家，如果沒有，那麼你設置indeterminate屬性。這真是一件麻煩事，因爲你很少看到indeterminate複選框，所以大多數用戶不知道如何處理它們。如果可能，應避免。

Answer 2

相對於其他元素創建相同插件訪問元素的多個實例。

例如：在你的情況下，而不是保持項目在jQuery對象var $tableRows = $('table.myList tr');訪問他們的事件。

$('#user_name').keyup(function() { 
    var sValue = $.trim($('input#user_name').val()); 
    if(lastInput==sValue) return; 
    var $tableRows = $(this).next().next().find("table.myList tr"); 
    if (sValue == '') { 
     $tableRows.show(); 
    } else { 
     $tableRows.each(function() { 
      var oLabel = $(this).find('label'); 
      if (oLabel.length > 0) { 
       if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) { 
        $(this).show(); 
       } else { 
        $(this).hide(); 
       } 
      } 
     }); 
     lastInput=sValue; 
    } 
}); 

而你只有你的實際列表。

對於樹狀複選框，你不需要插件只需添加一個按鈕或鏈接，每次點擊檢查它的狀態，你可以保持狀態jQuery data，並根據這些數據改變元素圖像。