loại trực tiếp kiểm tra/bỏ chọn tất cả các combo box

Question

tôi sử dụng loại trực tiếp để lập bản đồ JSON obejct để điều khiển người dùng, tôi có một danh sách các hộp kiểm duy nhất, Họ trông giống như

<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); 

Và tôi muốn thêm hộp kiểm toàn cầu sẽ kiểm tra/bỏ chọn tất cả các thứ khác, tôi đã thực hiện thay đổi này ở phía bên JavaScript nhưng hộp kiểm cập nhật toàn cục phần UI nhưng dữ liệu từ các hộp kiểm riêng biệt không ánh xạ tới đối tượng JSON.

toàn cầu hộp kiểm

$("#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;      
      }); 

     }); 

sau khi mã này đối tượng JSON của tôi chứa dữ liệu mà không liên quan đến giao diện người dùng.

Làm thế nào để cập nhật tất cả JSON sau khi thay đổi hộp kiểm từ phía JS?

Answer 1

Vui lòng kiểm tra ví dụ: http://jsfiddle.net/MenukaIshan/5gaLjh2c/

Tôi nghĩ rằng đó chính xác là những gì bạn cần. Tất cả các mục có IsChecked thuộc tính quan sát được. ViewModel chứa tính toán có thể quan sát (có thể đọc được và có thể ghi) để kiểm tra hoặc bỏ chọn tất cả các mục.

Answer 2

Có một giải pháp thay thế ở đây http://jsfiddle.net/rniemeyer/kXYuU/

Các giải pháp trên có thể được cải thiện trong hai cách

-Để làm AllChecked sai cho các danh sách rỗng, chúng ta cần phải kiểm tra chiều dài

-Để giảm tính toán lại số khi chọn tất cả cho một danh sách dài, chúng tôi cần thêm ga

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 });