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

时间:2012-07-23 13:53:09

标签: javascript jquery

我正在构建一个简单的asp页面,我在其中列出了每个名称左侧的复选框。 我设法创建了一个简单的jQuery脚本,允许根据输入隐藏和显示表行: http://jsfiddle.net/Tq97v/(第一部分)

如您所见,我可以输入名称的一部分,然后隐藏特定的行。 使用红色“x”我可以取消选中所有复选框。

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

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

第二件事 - 如何在网站上创建相同“插件”的多个实例。 现在我正在通过它来识别输入,但是将该输入作为参数调用函数会很好,并且在输入之后它会很好地表格并创建必要的逻辑。 这样我就可以在页面上多次调用函数来拥有多个列表。

我不是要求整个解决方案(当然它总是受欢迎:) :)但我需要的是如何以有效的方式实现这一目标并尽可能优化,因为有时我的列表有500多个元素。< / p>

P.S。不要看HTML代码,它是ASP生成的。


我找到了这个插件:https://github.com/bcollins/jquery.tristate,但我不知道如何在我的列表中使用它。


更新

我已经设法将我的代码转换为函数,但是现在我必须为每个列表调用3个函数 这是我更新的代码:http://jsfiddle.net/65MEV/4/
如何将其更改为一个功能?它会更好吗? 这是我更新的代码。仍然在考虑使用Indeterminate Checkbox而不是我的删除图像。

UPDATE2

我建立工作代码:)
http://jsfiddle.net/65MEV/9/
但我想尽可能地改进它 欢迎任何建议!

2 个答案:

答案 0 :(得分:0)

三态复选框就像三门户设备:幻觉。

您真正想要的是制作复选框indeterminate(通过将同名属性设置为true)。要实现这一点,您需要在每个复选框上使用change(或click)处理程序,然后您需要检查它们是否都处于相同的状态,如果没有,则设置indeterminate财产。真的很麻烦,因为你很少看到indeterminate复选框,因此大多数用户不知道如何处理它们。如果可能的话,要避免。

答案 1 :(得分:0)

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

例如:在您的情况下,而不是将项目保留在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保持状态,并根据此数据更改元素图像。