时间戳

首页 > 解决方案 > knockout.js 中的复选框逻辑

javascript - knockout.js 中的复选框逻辑

问题描述

我有两个复选框，我想实现以下逻辑：

如果两者都关闭，则允许，如果一个复选框打开，如果另一个要打开（选中），则第一个必须切换到关闭，反之亦然

如何使用 html 和 ko.js 做到这一点？

这是我切换的代码：

var viewmodel = function(){
  var self = this;
  self.checkA = ko.observable(true);
  self.checkB = ko.pureComputed({
    read: function(){
      return !self.checkA()
    },
    write: function(value){
      value? self.checkA(false) : self.checkA(true);
    },
    owner: self
  });
};

ko.applyBindings(new viewmodel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

A
<input type="checkbox" data-bind="checked: checkA" />

B
<input type="checkbox" data-bind="checked: checkB" />

标签： javascripthtmlknockout.js

解决方案

由于 B 的值不仅仅是 A 的值的函数（两者都可能为假），因此您必须有第二个 observable 来独立存储其状态。然后，对于您的逻辑，我建议使用 ko.subscribe 而不是计算函数来对任一值的更改做出反应。

var viewmodel = function() {
  var self = this;
  self.checkA = ko.observable(true);
  self.checkB = ko.observable(false);

  self.checkA.subscribe(function(value) {
    if (value) self.checkB(false); //also clear B
  });

  self.checkB.subscribe(function(value) {
    if (value) self.checkA(false); //also clear A
  });
};

ko.applyBindings(new viewmodel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

A <input type="checkbox" data-bind="checked: checkA" /> 
B <input type="checkbox" data-bind="checked: checkB" />

推荐阅读