KnockoutJS + 高级复选框功能

Question

此复选框的高级之处在于它不仅是根据现有数据设置的，而且页面还必须以多种方式响应用户通过手动选中或取消选中来更改复选框。

假设您有一个 murderCaseModel，其中列出了各种 Witnesses 犯罪行为。

这里有一个 Fiddle 给你：

http://jsfiddle.net/maxgrr/j6fm7162/6/

要求如下：

已经完成

如果加载的数据中存在先前的witnesses，则在页面加载时设置框的checked状态
```
<input type='checkbox' data-bind='checked: numWitnesses() > 0'></input>
```
删除Witness
添加Witness

待办事项

切换复选框会导致页面上的另一个区域出现或消失

如果用户将其切换为 'No'（未选中），我们将见证显示区域设为不可见（理想情况下，从 DOM 中删除）并删除所有 Witness 对象.
如果它切换到 'Yes'（选中），我们将见证显示区域设为可见，并确保至少有一个 Witness 对象准备好由用户填写。

这整个问题对我来说非常棘手，确定复选框的自动值以及用户为其选择的值很难掌握。任何帮助深表感谢。这是一个很酷的功能！

Answer 1

您可以使用 computed 让您的 wereThereAnyWitnesses 字段更智能：

self.wereThereAnyWitnesses = ko.computed({
    read: function() {
        return self.numWitnesses() > 0;
    },
    write: function(wereThereAnyWitnesses) {
        if (!wereThereAnyWitnesses && self.numWitnesses() > 0) {
            if (!confirm("Remove all current witnesses?"))
                return self.wereThereAnyWitnesses.notifySubscribers();
            else
                self.witnesses.removeAll();
        }

        if (wereThereAnyWitnesses && self.numWitnesses() == 0)
            self.addWitness();
        }
}, this);

在你的HTML中：

<input type='checkbox' data-bind='checked: wereThereAnyWitnesses' />

见Fiddle

Answer 2

您可以使用 jQuery。首先，确保您在 head 标签中包含 jQuery 库。只需将以下代码复制到您的 head 标签中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

然后，使用以下代码查看复选框是否被选中：

<script type="text/javascript">
if ($('#the_checkbox').is(":checked"))
{
  $('#the_textarea').hide();
}
</script>

这里是输入：

<input type="checkbox" id="the_checkbox" />

KnockoutJS + 高级复选框功能

KnockoutJS + Advanced Checkbox Functionality

javascript

checkbox

jquery

knockout.js