Question

请参阅fiddle。在这个小提琴中，我在一个可点击的div中有一个复选框，该复选框以红色背景标记。当您单击div /复选框时，div的ID将记录在控制台上。

HTML

<div id="vm">
  <div class="myDIv" id="MyDiv" data-bind="click : function() 
      {$root.clicked(event)}" style="width : 50px; height : 50px; background-color : red;">
      <input type="checkbox" data-bind="checked : attribute" value="checkbox-1"/>
  </div>
</div>

JS

function MyViewModel(){
    this.attribute = ko.observableArray([]);
    this.clicked = function(event){
        event.preventDefault();
        console.log(event.currentTarget.id); 
    }
}
ko.applyBindings(new MyViewModel());

在这里，当我单击该复选框时，该复选框未选中或未选中。我该如何实现？

Answer 1

我在HTML代码中添加了return true;，如下所示：

<div class="myDIv" id="MyDiv" data-bind="click : function(){$root.clicked(event); return true;}" style="width : 50px; height : 50px; background-color : red;">
  <input type="checkbox" data-bind="checked : attribute" value="checkbox-1"/>
</div>

请参见此fiddle。

我对event对象特别感兴趣，因此我不得不将click事件写为click : function(){$root.clicked(event)}

如果不需要event对象，则单击事件可以写为：

<div class="myDIv" id="MyDiv" data-bind="click : clicked" style="width : 50px; height : 50px; background-color : red;">
  <input type="checkbox" data-bind="checked : attribute" value="checkbox-1"/>
</div>

和javascript函数可以写为：

this.clicked = function(event){
    return true;
}

可点击div中的复选框未选中-淘汰赛

1 个答案: