Checkbox inside clickable div does not get checked- Knockout

Please see the fiddle.
In this fiddle, I have a checkbox inside a clickable div marked in red background. When you click on div/ the checkbox, id of div is logged on the console.

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


Here, the checkbox does not get checked or unchecked when I click on it. How do I achieve that?

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.