敲除复选框切换 css 类并在单击时选中切换

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 类 {已选中和未选中}，同时还使用已选中的敲除来选中和取消选中复选框：css：然后单击： .有什么想法我做得不对吗？ jsfiddle

Answer 1

正如评论中所建议的，选中和点击将有效地相互否定。选中的绑定将自动切换，而点击再次手动切换。删除点击修复了问题。

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

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

Answer 2

您可以尝试使用 attr 绑定并直接绑定到 class 属性，而不是使用 css 绑定。您可以使用 ko.computed 方法来 return 适当的 CSS class 名称。此外，您不需要 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);

这是更新后的 fiddle 的 link，它证明了这一点：

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

敲除复选框切换 css 类并在单击时选中切换

knockout checkbox toggle css classes and toggle checked upon click

javascript

css

knockout.js

checked

敲除复选框切换 css 类 并在单击时选中切换

knockout checkbox toggle css classes and toggle checked upon click

javascript

css

knockout.js

checked

敲除复选框切换 css 类并在单击时选中切换