如何根据选中的复选框使 Knockout Js 显示和隐藏任何区域

How to make any area visible and hidden by Knockoutjs based on checkbox chekced

我喜欢在页面中使用 Knockoutjs,如果选中特定的复选框,特定的 <ul> 部分将可见。如果选中 <ul> 部分将可见,如果未选中则 <ul> 部分将不可见。我搜索了 google 发现人们这样做与我的要求不一样。

<ul data-bind="foreach: tasks, visible: tasks().length > 0">
    <li>
        <input type="checkbox" data-bind="checked: isDone" />
        <input data-bind="value: title, disable: isDone" />
        <a href="#" data-bind="click: $parent.removeTask">Delete</a>
    </li>
</ul>

他们正在使用这个技巧data-bind="foreach: tasks, visible: tasks().length > 0" 他们正在检查视图模型是否有更多任务然后它是否可见但在我的情况下我需要使用复选框。任何人都可以告诉我如何实现它。谢谢

您需要将另一个可观察对象绑定到复选框,在 javascript:

var SimpleListModel = function(items) {
    this.isListVisible = ko.observable(true);
    this.items = ko.observableArray(items);    
};

在html中:

<input type="checkbox" data-bind="checked: isListVisible" > Show list

<p>Your items:</p>
<ul width="50" data-bind="foreach: items, visible: isListVisible"> 
    <li data-bind="text: $data"></li>
</ul>

jsFiddle