KnockoutJS Checked Binding

We covered enabled and disabled binding in the last article. This article explains another very important type of binding i.e. knockoutJS checked binding. This time of binding binds the check-able HTML dom elements such as checkboxes and radiobuttons with the view model properties. It is important to note that the binding is two way. Checking a check box or radio button sets the value of the corresponding view-model parameter to true. Similarly, if you set the value of the parameter to false in the view model, it un-checks the corresponding HTML element. It is important to mention here that for HTML elements that are non-checkable, you should value-binding to set and retrieve values. Now, take a look at a very simple example of checked binding.

KnockoutJS Checked Binding Example

Take a very carefulllook at the following example to see knockoutJS checked bining in action.

Download the code Try the code

In the above code we have check box and a div in html view section. In the javascript view model section we create model named StudentModel with one parameter i.e. Male. The value assigned to Male is true by default. Now come back to view section, here we set the “checked” attribute of the check box to the value of Male parameter which is true. Therefore, when you open the page in the browser, you shall see Male checkbox checked. Secondly, the div contains an if binding which says that display the div only if Male parameter is set to true. When you open the page, the text inside the div shall be visible.

Now in the javaScript view model, change the value of Male parameter to false and open the page. You shall male checkbox unchecked and the contents of the div removed from the page. In the next article, we shall study focus binding.

<<< KnockoutJS Enable/Disable BindingsKnockoutJS Focus Binding >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .