Javascript 淘汰模式：淘汰中的挑战复选框

我有一个击倒的模型。我希望选中复选框，然后复选框上应该出现勾号。 到目前为止，我实现了单击行并勾选复选框，但当我只单击复选框时，行高亮显示，但复选框未选中

请找到我迄今为止制作的小提琴

代码前参考

<input type="text" id="searchboxSample" name="lname" required
                                                   placeholder="searchboxSample" />
<table id="devtable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: paginated" >

    <tr data-bind="click: $parent.select, css: {flash: $parent.selected() === $data}">
    <td width="15"><input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selected() === $data" /></td>
      <td data-bind="text: ID"></td>
      <td data-bind="text: Name"></td>
      <td data-bind="text: Status"></td>
    </tr>
  </tbody>
</table>ID :
<input type="text" name="ID" data-bind="value: selectedID, enable: enableEdit" />
<br>Name :
<input type="text" name="Name" data-bind="value: selectedName, enable: enableEdit" />
<br>Status :
<input type="text" name="Status" data-bind="value: selectedStatus, enable: enableEdit" />
<br>
<input type="button" value="Send" disabled/>

<input type="button" value="ChangeModelData" data-bind="click: changeTableData">
<input type="text" id="lname" name="lname" required
                                                   placeholder="Nachname" data-bind="value: acceptedSymptom , event: {keyup: showMessage}"/>
<div class="pager">
 <a href="#" class="firstpage" data-bind="click: firstpage, visible: hasPrevious">&le;</a>
    <a href="#" class="previous" data-bind="click: previous, visible: hasPrevious">&le;</a>
    <span class="current" data-bind="text: $root.pageNumber"></span>
    <a href="#" class="next" data-bind="click: next, visible: hasNext">&gt;</a>
  <a href="#" class="lastpage" data-bind="click: lastpage, visible: hasNext">&ge;</a>
</div>

身份证件
名称
地位
身份证件：

姓名：

地位：

之所以发生这种情况，是因为单击事件从子项“气泡”上升到父项。读一读

要防止这种情况发生，您需要添加

单击气泡

绑定以及

单击

绑定，并使用相同的功能

$parent。选择

您现有的行

$parent.check

无效，因为它没有指向JS中的任何内容

以下是方法和实现：

var RowModel=函数（id、名称、状态）{
this.ID=ko.可观察（ID）；
this.Name=ko.observable（Name）；
此状态=可观察（状态）；
};
RowModel.fromRawDataPoint=函数（dataPoint）{
返回新的行模型（dataPoint.id、dataPoint.name、dataPoint.status）；
};
var myData=[{
id:“001”，
姓名：“Jhon”，
状态：“单身”
}, {
id:“002”，
姓名：“迈克”，
身份：“已婚”
}, {
id:“003”，
姓名：“玛丽”，
状态：“复杂”
},{
id:“004”，
姓名：“Jhon”，
状态：“单身”
}, {
id:“005”，
姓名：“迈克”，
身份：“已婚”
}, {
id:“006”，
姓名：“玛丽”，
状态：“复杂”
}, {
id:“007”，
姓名：“迈克”，
身份：“已婚”
}, {
id:“008”，
姓名：“玛丽”，
状态：“复杂”
}, {
id:“009”，
姓名：“迈克”，
身份：“已婚”
}, {
id:“010”，
姓名：“玛丽”，
状态：“复杂”
}
];
函数MyVM（数据）{
var self=这个；
/*************
分页逻辑的开始
******/
self.items=ko.observearray（）；
this.all=self.items；
self.pageNumber=ko.可观察（0）；
self.nbPerPage=2；
//我想这是我缺少功能的地方。
this.totalPages=ko.computed（函数（）{
var div=Math.floor（self.all（）.length/self.nbPerPage）；
div+=self.all（）.length%self.nbPerPage>0？1:0；
返回div-1；
});
this.paginated=ko.computed（函数（）{
var first=self.pageNumber（）*self.nbPerPage；
返回self.all.slice（first，first+self.nbPerPage）；
});
this.hasPrevious=ko.computed（函数（）{
返回self.pageNumber（）！==0；
});
this.hasNext=ko.computed（函数（）{
返回self.pageNumber（）！==self.totalPages（）；
});
this.next=函数（）{
self.deselect（）；
if（self.pageNumber（）0）{
警报（newValue+“让我们检查数据”+i）；
i=0；
}    
}  
});
self.enableEdit=ko.可观察（假）；
self.changeTableData=函数（）{
自加载数据([{
id:“111”，
名称：“ABC”，
状态：“单身”
}, {
身份证号码：“222”，
名称：“XYZ”，
身份：“已婚”
}, {
身份证号码：“333”，
名称：“PQR”，
状态：“复杂”
}, {
身份证号码：“444”，
名称：“PQR”，
状态：“复杂”
}, {
身份证号码：“555”，
名称：“PQR”，
状态：“复杂”
}, {
身份证号码：“666”，
名称：“PQR”，
状态：“复杂”
}, {
id:“777”，
名称：“PQR”，
状态：“复杂”
}, {
身份证号码：“888”，
名称：“PQR”，
状态：“复杂”
}
]);
}
self.showMessage=函数（数据、事件）{
如果（event.keyCode！==13）{
警报（“输入的键不是输入”）；
}否则{
自加载数据([{
id:“111”，
名称：“ABC”，
状态：“单身”
}, {
身份证号码：“222”，
名称：“XYZ”，
身份：“已婚”
}, {
身份证号码：“3333”，
名称：“PQR”，
状态：“复杂”
}]);
警惕（“你在正确的轨道上。”）；
警报（自我接受症状（“”））
}
} 
}
MyVM.prototype.loadData