如何在淘汰赛js中使复选框的标签可点击？

Question

我们如何使文本可点击。 以下是被称为淘汰模板的列表。 我可以直接选中该框，但无法使文本可单击，以便它可以反映该复选框。
HTML：

<ul data-bind="template: { name: 'choiceTmpl', foreach: choices, templateOptions: { selections: selectedChoices } }"></ul>

    <script id="choiceTmpl" type="text/html">
        <li>
            <input type="checkbox" data-bind="attr: { value: $data }, checked: $item.selections" />
            <label data-bind="text: $data"></label>
        </li>
    </script>

JS：

var viewModel = {
    choices: ["one", "two", "three", "four", "five"],
    selectedChoices: ko.observableArray(["two", "four"])
};

viewModel.selectedChoicesDelimited = ko.dependentObservable(function() {
    return this.selectedChoices().join(",");
}, viewModel);

ko.applyBindings(viewModel);

Jsfiddle演示： 这里

有什么办法可以使它可点击？

Answer 1

在<input>元素周围放置一个<label> ：

 var viewModel = { choices: ["one", "two", "three", "four", "five"], selectedChoices: ko.observableArray(["two", "four"]) }; viewModel.selectedChoicesDelimited = ko.dependentObservable(function() { return this.selectedChoices().join(","); }, viewModel); ko.applyBindings(viewModel); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <ul data-bind="foreach: choices"> <li> <label> <input data-bind="attr: { value: $data }, checked: $parent.selectedChoices" type="checkbox" /> <span data-bind="text: $data"></span> </label> </li> </ul> <pre data-bind="html: JSON.stringify(selectedChoices(), null, 2)"></pre> 

在您的小提琴中： http : //jsfiddle.net/x0f1pk6q/

另外，您可以在循环中构造一个id属性。 您必须绝对确保它是唯一的 。 我建议您使用某种实用程序，该实用程序可以增加闭包中的索引，该闭包保证每个会话都是唯一的。

您需要链接id和for使用相同的方法属性：

 var viewModel = { choices: ["one", "two", "three", "four", "five"], selectedChoices: ko.observableArray(["two", "four"]), getCbId: function(val, i) { // This combination of value and index aims to create a // "kind-of-unique" id. See answer for more info. return "CB_" + val + "_" + i; } }; viewModel.selectedChoicesDelimited = ko.dependentObservable(function() { return this.selectedChoices().join(","); }, viewModel); ko.applyBindings(viewModel); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <ul data-bind="foreach: choices"> <li> <input data-bind="attr: { value: $data, id: $root.getCbId($data, $index()) }, checked: $root.selectedChoices" type="checkbox" /> <label data-bind="text: $data, attr: { for: $root.getCbId($data, $index()) }"></label> </li> </ul> <pre data-bind="html: JSON.stringify(selectedChoices(), null, 2)"></pre>