复选框列表的 selectAll() 和 deselectAll() 导致问题答案

【问题标题】：selectAll() and deselectAll() for checkboxlist causing issue复选框列表的 selectAll() 和 deselectAll() 导致问题
【发布时间】：2014-06-16 11:32:08
【问题描述】：

我有一个复选框列表，它通过以下方式从数据库中动态填充。我在这里使用淘汰赛

这很好，用户可以选中和取消选中，只要用户使用点击事件选中或取消选中复选框，并按以下方式进行一些计算。

$('.options input:checkbox').click(function () {
    var input = $(this);
    if (input.is(':checked')) {
    }
    else {
    }
});

我也有 selectall 和 deselectall 按钮，我正在按以下方式进行操作

选择所有功能

$('.options').children('input[type="checkbox"]').each(function () {
    var input = $(this);
    if (!this.checked) {
    this.checked = true;
    }

});

取消全选

$('.options').children('input').each(function () {
    if ($(this).is(':checkbox')) {
        var input = $(this);
        if (this.checked) {
            this.checked = false;
        }
});

问题在于selectall 和deselectall。最初，当页面加载时，我手动选择复选框 1 和复选框 3，然后单击选中所有复选框的全选按钮，然后我选择取消选中所有复选框的取消全选按钮，问题就在这里，当我手动单击时取消全选任何复选框，它也会使复选框 1 和复选框 3 被选中。

我该如何解决？

【问题讨论】：

条件不应该在if 语句中，以防selectall。 if (!this.checked) { this.checked = true;}
我已经改了，但问题仍然存在。
你能显示手动选择复选框1和3的代码
它在我发布的上述问题的第二部分
你为什么使用jQuery而不是knockout？这个想法是您应该只编辑模型中的数据，然后根据模型更新视图。您似乎在这里将两者混合在一起。您的 selectAll 和 deselectAll 应该只循环遍历模型并为每个用户更改 MyViewModeul.MyData.UsersChecked。

标签： jquery knockout.js checkboxlist

【解决方案1】：

这就是你在淘汰赛中的做法：

http://jsfiddle.net/s86cm/

<div class="options" data-bind="foreach:users,visible: true" style="display: none;">
  <input type="checkbox" class='roles' name='roles' data-bind="attr: { value: id }, checked:isChecked" />
  <span data-bind="text: name"></span>
</div>
<button data-bind="click: selectAll">select all</button>
<button data-bind="click: deselectAll">delect all</button>

$(function() {
  var model = {
    users : [
        { id: 1, name: 'John', isChecked: false },
        { id: 2, name: 'Max', isChecked: true },
        { id: 3, name: 'Adam', isChecked: true },
        { id: 4, name: 'Sam', isChecked: false },
    ]
  };

  var viewModel = new ViewModel(model);
  ko.applyBindings(viewModel);
});

function ViewModel(model) {
  var self = this;

  var users = $.map(model.users, function(user) { return new User(user) });

  self.users = users;

  var setIsChecked = function(isChecked) {
    for (var i = 0; i < self.users.length; i++){
        self.users[i].isChecked(isChecked);
    }
  };

  self.selectAll = function() {
    setIsChecked(true);
  };

  self.deselectAll = function() {
    setIsChecked(false);
  };
}

function User(user) {
  var self = this;

  self.id = user.id;
  self.name = user.name;
  self.isChecked = ko.observable(user.isChecked);
}

【讨论】：