CheckBox not getting checked in Knockoutjs - checkbox

Question

I am using a checkbox with a function inside the data-bind, but I am unable to check the checkbox.
view:
<input type="checkbox" data-bind="click: function(){ f('hello parameter'); }">Click me
View Model:
var VM = function () {
this.f = function (param) {
alert(param); // here i am getting 'hello parameter'
return true;
}
}
ko.applyBindings(new VM());
Here is my Fiddle

Answer 1

By default, the click binding prevents the default reaction to a click based on the assumption that your JavaScript click event handler will handle everything. You need to return "true" to get the default behavior anyway, which you are doing from your f() function but not the wrapper inside data-bind:
<input type="checkbox" data-bind="click: function() { f('hello parameter'); }">
should be
<input type="checkbox" data-bind="click: function() { return f('hello parameter'); }">

Answer 2

Without context around the code it's not clear how you intend to use this control. With a checkbox you would normally use the checked binding that is bound to a boolean observable:
The checked binding links a checkable form control — i.e., a checkbox () or a radio button () — with a property on your view model.
So another way of writing this using the checked binding would be:
Sample Code:
var VM = function () {
var self = this;
self.myCheck = ko.observable(false);
self.myCheck.subscribe(function () {
alert('checked value = ' + self.myCheck());
});
}
ko.applyBindings(new VM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>
<input type="checkbox" data-bind="checked: myCheck" />
Click me
</div>
With this example, there's an observable that tracks the value of the checkbox: self.myCheck. So when the checkbox is checked/unchecked, self.myCheck() will be set to true/false.
In order to provide some output or run some code when the value is changed, I've subscribed to the observable, which basically means that every time the value of the observable is changed, the alert will be fired (or whatever code you place in there).
Demo On JS Fiddle