Question

我有一个checkboxlist，它以下面的方式从数据库中动态填充。我在这里使用淘汰赛

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

$('.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被选中。

我该如何解决？

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

selectAll（）和deselectAll（）用于导致问题的checkboxlist

1 个答案: