淘汰赛选中/取消选中所有组合框

发布于 2024-12-29 23:23:36 字数 912 浏览 2 评论 0原文

我使用淘汰赛将 JSON 对象映射到用户控件，我有一个复选框列表，它们看起来像

 <input type="checkbox" data-bind="checked: IsEnabled1" />

我有 JsonObject

 var viewModel = {
            IsEnabled1 :ko.observable(true),            
            IsEnabled2 :ko.observable(true),
            IsEnabled3 :ko.observable(false)
        };
  ...
  ko.applyBindings(viewModel);

并且我想添加将选中/取消选中所有其他内容的全局复选框，我在 JavaScript 端进行了此更改，但全局复选框更新了 UI 部分，但来自单独复选框的数据未映射到 JSON目的。

此代码后的全局复选框

  $("#GeneralTable thead tr th:first input:checkbox").click(function () {
            var checkedStatus = this.checked;
            $("#GeneralTable tbody tr td:first-child input:checkbox").each(function () {
                this.checked = checkedStatus;                    
            });

        });

我的 JSON 对象包含与 UI 无关的数据。

如何从 JS 端更改复选框后更新所有 JSON？

原文

I using knockout for mapping JSON obejct to user control, I have a list of single checkboxes,
They look like

 <input type="checkbox" data-bind="checked: IsEnabled1" />

I Have JsonObject

 var viewModel = {
            IsEnabled1 :ko.observable(true),            
            IsEnabled2 :ko.observable(true),
            IsEnabled3 :ko.observable(false)
        };
  ...
  ko.applyBindings(viewModel);

And I want to add global check box that will be check/uncheck all other, I made this changes on JavaScript side but global check box update UI part but they data from separate check boxes doesn't mapping to JSON object .

Global checkbox

  $("#GeneralTable thead tr th:first input:checkbox").click(function () {
            var checkedStatus = this.checked;
            $("#GeneralTable tbody tr td:first-child input:checkbox").each(function () {
                this.checked = checkedStatus;                    
            });

        });

after this code my JSON object contain data that not related to UI.

How to update all JSON after change check boxes from JS side ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等往事风中吹 2025-01-05 23:23:36

请检查示例： http://jsfiddle.net/MenukaIshan/5gaLjh2c/

我认为是正是您所需要的。所有项目都有 IsChecked 可观察属性。 ViewModel 包含计算的可观察值（可读和可写）来检查或取消检查所有项目。

回复收藏 0 原文

猥︴琐丶欲为 2025-01-05 23:23:36

这里有一个替代解决方案 http://jsfiddle.net/rniemeyer/kXYuU/

上面的解决方案可以可以从两个方面进行改进

- 为了使 AllChecked 对于空列表为 false，我们需要检查长度

- 为了减少长列表选择全部时的重新计算次数，我们需要添加throttle

self.AllChecked = ko.computed({
    read: function() {
        var firstUnchecked = ko.utils.arrayFirst(self.Items, function(item) {
            return item.IsChecked() == false;
        });
        return self.Items.length && !firstUnchecked;
    },
    write: function(value) {
        ko.utils.arrayForEach(self.Items, function(item) {
            item.IsChecked(value);
        });
    }
}).extend({ throttle: 1 });

There is an alternative solution here http://jsfiddle.net/rniemeyer/kXYuU/

The solution above can be improved in two ways

-To make AllChecked false for empty lists, we need to check length

-To reduce the number recalculations when selecting all for a long list, we need to add throttle

self.AllChecked = ko.computed({
    read: function() {
        var firstUnchecked = ko.utils.arrayFirst(self.Items, function(item) {
            return item.IsChecked() == false;
        });
        return self.Items.length && !firstUnchecked;
    },
    write: function(value) {
        ko.utils.arrayForEach(self.Items, function(item) {
            item.IsChecked(value);
        });
    }
}).extend({ throttle: 1 });

回复收藏 0 原文

~没有更多了~