Javascript 我试图得到一个多选下拉框与复选框，面临一些问题，而填充项目和得到所有检查工作

我听过小提琴演奏

并对其进行了修改。我的小提琴是-

我正在努力在下拉列表中选择全部/取消全部功能。 我已经将Items数组设置为可观察的，并推送从服务器返回的值

我做错了

功能检查框（标签，已检查）{
this.label=标签；
this.isChecked=ko.可观察（isChecked | | false）；
}
var-authTypeArray=[{name:'All Therapy'}，{name:'P Therapy'}，{name:'O Therapy'}，{name:'S Therapy'}，{name:'R Therapy'}]；
函数ViewModel（）{
this.Items=ko.observearray（）；
this.specialtyViewArray=authTypeArray；
对于（var id=0；id
*{
框大小：边框框；
字体系列：无衬线；
}
.主货柜{
宽度：400px；
}
.主容器，
.选择容器{
位置：相对位置；
}
.选择容器{
高度：2米；
}
选择，
.选择容器：：在{
宽度：100%；
身高：100%；
}
.选择容器：：在{
内容：“；
位置：绝对位置；
排名：0；
背景：rgba（0,0,0,0）；
}
.选项容器{
位置：绝对位置；
顶部：2米；
宽度：100%；
边框：1px实心#A9A9；
背景：#FFFFFF；
显示：无；
}
.options-container.com，如图所示{
显示：块；
}
标签{
显示：块；
填充：.2em；
}
标签：非（：最后一个子项）{
边框底部：1px实心#FFFFFF；
}
.检查{
背景：欧洲中央银行；
颜色：白色；
}
.按钮容器{
显示器：flex；
证明内容：柔性端；
边框顶部：1px实心#A9A9；
背景：#F6F6F6；
}
.按钮容器按钮{
边缘：.4em；
左边距：0；
}

好啊
取消
您犯了很多错误：

名称：'All Therapy'
是什么

this.Items
-您像ObservalArray（函数）一样定义了此变量，但试图将数组的方法应用于此变量，如
this.Items.filter

在计算函数中，您有错误的上下文。你可以用

在html模板中有未定义的绑定


checkAll
在您的
CheckableBox
模型中不存在。您需要使用
$parent.checkAll

下面是简单的工作代码：

function CheckableBox(label, isChecked) {
  this.label = label;
  this.isChecked = ko.observable(isChecked || false);
}

function ViewModel(data) {
  this.items = data.map(function(item) {
      return new CheckableBox(item.name, false);
  });

  this.selectedItems = ko.observable([]);

  this.tempSelection = ko.pureComputed(function() {
    return this.items.filter(function(item) {
      return item.isChecked();
    });
  }, this);

  this.selectedItemsStr = ko.pureComputed(function() {
    var str = this.selectedItems()
      .map(function(item) {
        return item.label;
      })
      .join(", ")

      return str || "-- No options selected --";
  }, this);

  this.optionsShown = ko.observable(false);
  this.optionsShown.subscribe(function() {
    this.updateSelections();
  }, this);

  this.confirmSelection(); 

  this.checkAll = ko.pureComputed({
    read: function () {
      return this.items.every(function(item) {
        return item.isChecked();
      });
    },
    write: function (value) {
      this.items.forEach(function (item) {
        item.isChecked(value);
      });
    },
    owner: this
  });
};

ViewModel.prototype.toggleOptions = function() {
  this.optionsShown(!this.optionsShown());
};

ViewModel.prototype.confirmSelection = function() {
  this.selectedItems(this.tempSelection());
  this.closeOptions();
};

ViewModel.prototype.closeOptions = function() {
  this.optionsShown(false);
};

ViewModel.prototype.updateSelections = function() {
  var selection = this.selectedItems();
  this.items.forEach(function(item) {
    item.isChecked(~selection.indexOf(item));
  });
};

var authTypeArray = [
  { name:'All Therapy' },
  { name:'P Therapy' },
  { name:'O Therapy' },
  { name:'S Therapy' },
  { name:'R Therapy' }
];

ko.applyBindings(new ViewModel(data));

我希望这对你有帮助
 我尝试了你建议的修改，效果非常好。但在一个案例中，当我默认通过chackableBox中的Ischeck true时，所有治疗都没有得到检查，然后很少有行为不起作用。太棒了，我没有看到这种情况。我将其修改为“如何在选择所有治疗时将其更改为仅显示所有治疗”，而不是显示所有治疗，p治疗，…您的代码与我的代码不同。具体来说，tempSelection函数是的，我将其更改为在所选选项列表中显示所有治疗，但当选择“全部”时，我只想显示所有治疗，而不是以逗号分隔的其他项目。Hi@yurzui，在这种情况下，我唯一拥有的是popover中的多选。我的府绸有桌子。表行中填充了我从后端获取的所有数据。现在我想根据列表中选择的项目刷新数据。我添加了代码部分作为注释并更新了fiddle。你能看一下吗？