小编Rup*_*ups的帖子

在淘汰赛中标记复选框和收音机

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

<label>
<input type="checkbox" />option 1
</label>
Run Code Online (Sandbox Code Playgroud)

要么

<input id="checkboxid" type="checkbox" />
<label for="checkboxid">option 1</label>
Run Code Online (Sandbox Code Playgroud)

我试图通过淘汰赛获得相同的行为,但无法找到相同的帮助:

<label data-bind="text: $data.optiontext">
    <input type="checkbox" data-bind="value: $data.optionvalue, checked: $parent.selectedOptions" />
</label>
Run Code Online (Sandbox Code Playgroud)

下面的视图(或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>?
Run Code Online (Sandbox Code Playgroud)

这是视图模型:

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);
Run Code Online (Sandbox Code Playgroud)

这是jsFiddle链接: …

html javascript knockout.js

26
推荐指数
1
解决办法
1万
查看次数

标签 统计

html ×1

javascript ×1

knockout.js ×1