26

在 html 中，当我们单击文本或将鼠标悬停在单选按钮或复选框的文本上时，我们可以使用 html 选择它，如下所示：

<label>
<input type="checkbox" />option 1
</label>

或者

<input id="checkboxid" type="checkbox" />
<label for="checkboxid">option 1</label>

我试图通过淘汰赛获得相同的行为，但无法找到太多帮助：

<label data-bind="text: $data.optiontext">
    <input type="checkbox" data-bind="value: $data.optionvalue, checked: $parent.selectedOptions" />
</label>

视图（或 html）如下（注意下面的代码不包含上面的 html，所以当你尝试它时，你需要进行上述更改并检查它）：

<div data-bind="foreach: options">
    <input type="checkbox" data-bind="value: $data.optionvalue, checked: $parent.selectedOptions" />
    <label data-bind="text: $data.optiontext"></label>
</div>

<hr />

<div data-bind="text: selectedOptionsList"></div>​

这是视图模型：

var viewModel = {
    options: [
                { optiontext: 'Simple', optionvalue: "1" },
                { optiontext: 'Advanced', optionvalue: "2" }
             ],
    selectedOptions: ko.observableArray(["2"])
};

viewModel.selectedOptionsList = ko.computed(function() {
    return this.selectedOptions().join(",");
}, viewModel);

ko.applyBindings(viewModel);

这是 jsFiddle 链接：http: //jsfiddle.net/rupesh_kokal/AFzbY/

4

2 回答 2

36

您可以使用额外span的文本来实现 1. 版本：

<label>
    <input type="checkbox" data-bind="value: $data.optionvalue, 
           checked: $parent.selectedOptions" />
    <span data-bind="text: $data.optiontext"/>
</label>

演示小提琴。

或者 2. 使用attr 绑定设置id和for属性的版本：

<input type="checkbox" data-bind="value: $data.optionvalue, 
       checked: $parent.selectedOptions, attr: { id: optiontext}" />    
<label data-bind="text: $data.optiontext, attr: {for: optiontext}" />

演示小提琴

于 2012-12-01T15:21:37.110 回答
4

Yo 甚至可以通过使用 Knockouts 注释绑定语法来获得绑定以删除额外的跨度元素：

<label>
<input type="checkbox" data-bind="value: $data.optionvalue, 
       checked: $parent.selectedOptions" />
<!-- ko text: $data.optiontext --><!-- /ko --></label>

如果在狭窄的空间中使用，这将防止复选框和跨度分成两行。

于 2015-06-09T06:34:12.107 回答