jQuery可搜索复选框列表和三态复选框

Question

我正在构建一个简单的asp页面，在这个页面上，我有一个每个名字左边都有复选框的人列表。我已经创建了一个简单的jQuery脚本，它允许根据输入隐藏和显示表的行：http://jsfiddle.net/Tq97v/（第一部分）

正如你所看到的，我可以输入名称的一部分，然后隐藏特定的行。使用红色"x"，我可以取消选中所有复选框。

我现在要做的是将静态的红色"x"更改为三态复选框。甚至不知道如何开始。

我是否必须将更改侦听器添加到列表中的每个复选框中？

第二件事-如何在网站上创建同一"插件"的多个实例。现在我正在通过它来识别输入，但最好用该输入作为param来调用函数，它会在该输入之后对表进行微调，并创建必要的逻辑。通过这种方式，我可以在页面上多次调用函数，以获得多个列表。

我并不是要求整个解决方案（当然，这总是受欢迎的：），但我需要的是如何以高效的方式并尽可能优化地实现这一点，因为有时我的列表中有500多个元素。

附言：不要看HTML代码，它是ASP生成的。

---

我发现了这个插件：https://github.com/bcollins/jquery.tristate，但我不知道如何将其用于我的列表。

---

更新：

我已经设法将代码转换为函数，但现在我必须为每个列表调用3个函数
这是我更新的代码：http://jsfiddle.net/65MEV/4/
如何将其更改为一个函数？会更好吗
这是我更新的代码。仍然在考虑做那个"不确定"复选框的方法，而不是我的删除图像。

更新2

我构建工作代码：）
http://jsfiddle.net/65MEV/9/
但我想尽可能地改进它
欢迎提出任何建议！

Answer 1

三态复选框就像三门设备：一种幻觉。

您实际想要的是使复选框为indeterminate（通过将相同名称的属性设置为true）。要实现这一点，您需要在每个复选框上都有一个change（或click）处理程序，然后需要检查它们是否都处于相同状态，如果不是，则设置indeterminate属性。这真的很麻烦，因为你很少看到indeterminate复选框，所以大多数用户都不知道该怎么处理它们。尽可能避免。

Answer 2

创建同一插件访问元素的多个实例相对于其他元素。

例如：在您的情况下，var $tableRows = $('table.myList tr');不是将项目保留在jQuery对象中，而是在事件中访问它们。

$('#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数据保持状态，并根据这些数据更改元素图像。