Kendo UI - 自定义网格过滤器：复选框在每次点击时都不起作用

Question

[更新]

在我这样做之后： http://dojo.telerik.com/aqIXa 当我单击例如 ProductName 过滤器，然后选择并取消选择所有项目时，转到其他字段例如 Unit Price，单击选择并取消选择所有我返回到 Product Name 字段，并且现在在过滤器中：

您可以看到 Select All 组合框再次创建，并且在我重复这些步骤后它将继续创建。有谁知道为什么会发生这种情况？

我目前在剑道工作，并尝试为每一列制作自定义网格过滤器。 我用了这个例子：

http://dojo.telerik.com/iwAWU

在我添加的 initCheckboxFilter 函数中，它为全选创建了复选框。

var selectAllCheckbox= $("<div><input type='checkbox' id='checkAll' checked/> Select All</div>").insertBefore(".k-filter-help-text");

在我实现的功能之外：

function clickMe(){
   $("#checkAll").click(function () {
    if ($("#checkAll").is(':checked')) {
        $(".book").prop("checked", true);
    } else {
        $(".book").prop("checked", false);
    }
});
} 

(.book 是里面的模板类：

 var element = $("<div class='checkbox-container'></div>").insertAfter(helpTextElement).kendoListView({
          dataSource: checkboxesDataSource,
          template: "<div><input type='checkbox' class='colDefFilter'  value='#:" + field + "#' checked />#:" + field + "#</div>",
        });

)

我还添加了 UnitPrice 和 UnitInStock 字段：

function onFilterMenuInit(e) {
        debugger;
        if (e.field == "ProductName" || "UnitPrice" || "UnitInStock") {
          initCheckboxFilter.call(this, e);

        }
      } 

这看起来像：

我第一次单击某个列过滤器上的全选复选框时，它会选中和取消选中所有项目，它工作正常。当我尝试在其他列上执行此操作时，该事件不会触发。有谁知道出了什么问题？ 谢谢！

Answer 1

您的问题是您使用 id 来检查所有复选框，这就是 jquery 总是从第一个下拉列表（产品）中选择复选框的原因

您需要将 checkAll 用作类而不是 id，然后像这样更改您的 clickMe() 函数，它将起作用：

function clickMe(){
       $(".checkAll").click(function () {
        if ($(this).is(':checked')) {
           $(this).closest('.k-filter-menu').find(".book").prop("checked", true);
        } else {
            $(this).closest('.k-filter-menu').find(".book").prop("checked", false);
        }
    });
    }

这是工作示例http://dojo.telerik.com/aqIXa

编辑：

你用来添加全选复选框的方式应该是这样的

var selectAllCheckbox= $("<div><input type='checkbox' class='checkAll' checked/> Select All</div>").insertBefore(e.container.find(".k-filter-help-text"));

这个

var selectAllCheckbox= $("<div><input type='checkbox' id='checkAll' checked/> Select All</div>").insertBefore(".k-filter-help-text");

否则它将为先前初始化的过滤器下拉列表添加多个全选复选框。

这里是更新的演示：http://dojo.telerik.com/aqIXa/4