Question

<div data-bind="css: { highlighted: highlight }, click: toggleHighlight">
  random string
</div>
<input type="checkbox" data-bind="css: { 'checked': dimitri, 'unchecked': !dimitri() }, click: toggledimitri, checked: dimitri"> 

var ViewModel = function() {
  var self = this;
  self.dimitri = ko.observable(false);
  self.toggledimitri = function() { self.dimitri(!self.dimitri()) };
  self.highlight = ko.observable(true);   
  self.toggleHighlight = function () { self.highlight(!self.highlight()) };
}

ko.applyBindings(new ViewModel());
var vm = ko.dataFor(document.body);

基本上我所追求的是切换css类{checked and unchecked}同时还使用knockout check检查并取消选中该复选框：css：然后单击：。有什么想法我有点不对吗？ jsfiddle

Answer 1

根据评论中的建议，选中和点击将有效地互相否定。检查的绑定将自动切换，同时手动单击再次切换。删除点击可以解决问题。

<input type="checkbox" data-bind="css: { 'checked': dimitri, 'unchecked': !dimitri() }, checked: dimitri">

http://jsfiddle.net/KDypD/55/

Answer 2

您可以尝试使用css绑定并直接绑定到attr属性，而不是使用class绑定。您可以使用ko.computed方法返回相应的CSS类名。此外，您不需要像user3297291所述的click事件。该复选框如下所示：

<input type="checkbox" data-bind="attr: { 'class': checkedClass }, checked: dimitri">

ko.computed方法看起来像这样：

this.checkedClass = ko.computed(function() {
  return this.dimitri() ? 'checked' : 'unchecked';
}, this);

这是一个更新小提琴的链接，用于演示：

http://jsfiddle.net/KDypD/56/

敲击复选框切换css类并在点击时切换

2 个答案: