如何使用Knockout JS选择一个不可见的复选框？

Question

我想点击div：

选择一个（不可见）复选框

<div class="my-button" data-bind="click: selected">
    <input type="checkbox" data-bind="checked: selected" /> A
</div>

<div class="my-button" data-bind="click: selected">
    <input type="checkbox" class="hidden" data-bind="checked: selected" /> B
</div>

<div class="my-button" data-bind="click: selected">
    <input type="checkbox" class="hidden" data-bind="checked: selected" /> C
</div>

// JS code
var selectedlModel = function() {        
    var self = this;
    self.selected = ko.observable(false);        
}

ko.applyBindings(selectedlModel());

以上代码无效。 See fiddle

我也想知道 - 在Angular中可以做到这样的事情：

data-bind="checked: clicked ? true : false"

我不必在我的JS文件中编写任何代码。在Knockout中这可能吗？

Answer 1

对于每个（隐藏）复选框，您需要一个单独的observable，就像Polly Shaw所说，click:绑定需要一个函数，而checked:需要一个布尔值。

我个人经常使用这种东西所以我做了一个小帮手功能来为我创建可切换的项目。这是一个例子：

视图模型

function toggleable(name) {
    var self = {};
    self.name = name;
    self.checked = ko.observable(false);
    self.toggle = function () {
        self.checked(!self.checked());
    };
    return self;
}

function ViewModel() {        
    var self = this;
    // array of checkboxes
    self.checkboxes = ["A", "B", "C"].map(toggleable); // make each a toggleable object
}

ko.applyBindings(new ViewModel());

模板

<div data-bind="foreach: checkboxes">
    <div class="my-button" data-bind="click: toggle">
        <input type="checkbox" data-bind="checked: checked" hidden /> <span data-bind="text: name"></span>
    </div>
</div>

http://jsfiddle.net/VUk6J/5/

注意：复选框是否隐藏无关紧要，但如果是，请考虑使用不同的样式;）

http://jsfiddle.net/VUk6J/6/（相同的JS，在css中添加了css:绑定和一个类）

Answer 2

我认为这可能是因为您的点击是绑定到属性而不是事件。也许你需要添加一个行为？看到这个小提琴：http://jsfiddle.net/VUk6J/3/

var selectedlModel = function() {        
    var self = this;
    self.selected = ko.observable(false);
    self.clickSelected = function() { self.selected(!self.selected());};
}

ko.applyBindings(selectedlModel());


<div class="my-button" data-bind="click: clickSelected">
    <input type="checkbox" data-bind="checked: selected" /> A
</div>

<div class="my-button" data-bind="click: clickSelected">
    <input type="checkbox" class="hidden" data-bind="checked: selected" /> B
</div>

<div class="my-button" data-bind="click: clickSelected">
    <input type="checkbox" class="hidden" data-bind="checked: selected" /> C
</div>