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

我们如何使文本可点击。下面是一个参考淘汰模板的列表。我可以直接选中该复选框，但无法使文本可单击，以便它可以反映复选框
HTML:

JSFIDLE演示：

有什么方法可以让它可以点击吗？

在

元素周围放置一个

：

var viewModel={
选择：[“一”、“二”、“三”、“四”、“五”]，
选择选项：ko.observearray（[“二”，“四]）
};
viewModel.selectedChoicesDelimited=ko.DependentToServable（函数（）{
返回此.selectedChoices（）.join（“，”）；
}，视图模型）；
应用绑定（视图模型）





您是否尝试过赋予复选框和标签相同的ID？有没有办法不使用标签包装输入？这并不总是可取的…@cale_b，我添加了一个使用
id
和
作为
属性的示例。就个人而言，我更喜欢包装版本。如果你不小心，你可能会得到重复的id。。。包装版本没有这种风险。
<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>

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);