Edit in JSFiddle

$(document).ready(function() {
    var viewModel = function() {
        // Text, HTML and Value bindings
        var name = ko.observable("<b>abc</b>");

        // Checkbox binding
        var cbVal = ko.observable(true);

        // Radio Button & Drop down binding
        var selectedCountryRadio = ko.observable();
        var selectedCountryDd = ko.observable();
        var selectedCountries = ko.observableArray([]);
        var countries = [{
            key: "IND",
            name: "India"},
        {
            key: "USA",
            name: "United States"},
        {
            key: "AUS",
            name: "Australia"},
        {
            key: "UK",
            name: "United Kingdom"}];

        // Enable and Disable bindings
        var enableVal = ko.observable(false);
        var disableVal = ko.observable(false);

        // has focus bindings
        var cbHasFocus = ko.observable();
        var tbHasFocus = ko.observable();
        var btnHasFocus = ko.observable();
        var setTextBoxFocus = function() {
            tbHasFocus(true);
        };

        // Events binding
        var detailsAreVisible = ko.observable(false);
        var showDetails = function() {
            detailsAreVisible(true);
        };
        var hideDetails = function() {
            detailsAreVisible(false);
        };

        // CSS and Style Binding
        var num = ko.observable(0);
        var numIsPositive = function() {
            return num() >= 0;
        };

        // Attribute Binding
        var goog = ko.observable("http://www.google.com");
        var googName = ko.observable("Google");
        var picSrc = ko.observable("https://lh4.googleusercontent.com/-UUguAMJ00ys/UHzRgDzjYmI/AAAAAAAACgE/5KJGtNxZ044/s128/US.gif");
        var picAlt = ko.observable("some pic");

        return {
            name: name,
            cbVal: cbVal,
            countries: countries,
            selectedCountryRadio: selectedCountryRadio,
            selectedCountryDd: selectedCountryDd,
            selectedCountries: selectedCountries,
            enableVal: enableVal,
            disableVal: disableVal,
            cbHasFocus: cbHasFocus,
            tbHasFocus: tbHasFocus,
            btnHasFocus: btnHasFocus,
            setTextBoxFocus: setTextBoxFocus,
            detailsAreVisible: detailsAreVisible,
            showDetails: showDetails,
            hideDetails: hideDetails,
            num: num,
            numIsPositive: numIsPositive,
            goog: goog,
            googName: googName,
            picSrc: picSrc,
            picAlt: picAlt
        };
    }();

    ko.applyBindings(viewModel);
});

<div>
    <h3>Text and HTML Bindings</h3>
    <input data-bind="value:name"/><br/>
    Text Binding : <span data-bind="text:name"></span><br/>
    HTML Binding : <span data-bind="html:name"></span>
    <hr/>
</div>

<div>
    <h3>Value Bindings</h3>
    <b>RESULT: <span data-bind="text:name"></span><br/></b>
    Value Binding on 'change' :<input data-bind="value:name, valueUpdate: 'change'"/> <br/>
    Value Binding on 'afterkeydown' : <input data-bind="value:name, valueUpdate: 'afterkeydown'"/> <br/>
    Value Binding on 'afterkeyup' : <input data-bind="value:name, valueUpdate: 'afterkeyup'"/> <br/>
    Value Binding on 'afterkeypress' : <input data-bind="value:name, valueUpdate: 'afterkeypress'"/><br/>
    <hr/>
</div>

<div>
    <h3>Checkbox Bindings</h3>
    <input type="checkbox" data-bind="checked:cbVal"/> Select Me !! <br/>
    Selected Value: <span data-bind="text:cbVal"></span>
    <hr/>
</div>

<div>
    <h3>Radio Button Bindings</h3>
    Selected Country: <span data-bind="text:selectedCountryRadio"></span>
    <div data-bind="foreach: countries">
       <input type="radio" data-bind="value:key, checked:$parent.selectedCountryRadio"/><span data-bind="text:name"></span><br/>
    </div>
    <hr/>
</div>

<div>
    <h3>Drop Down Bindings</h3>
    Select 1 Country: <span data-bind="text:selectedCountryDd"></span><br/>
    <select data-bind="options:countries, value:selectedCountryDd, optionsText:'name', optionsValue:'key', optionsCaption:'Select Country...'"></select><br/>
    <br /><br />
    Select Multiple Countries: <span data-bind="text:selectedCountries"></span><br/> 
    <select multiple="multiple" data-bind="options:countries, selectedOptions:selectedCountries, optionsText:'name', optionsValue:'key', optionsCaption:'Select Country...'"></select>
    <hr/>
</div>

<div>
    <h3>Enable Disable Bindings</h3>
    Enable <input type="checkbox" data-bind="checked:enableVal"/>
    <input type="text" data-bind="enable: enableVal, value:name"/>
    <span data-bind="text:enableVal"></span><br/>
    Disable <input type="checkbox" data-bind="checked:disableVal"/>
    <input type="text" data-bind="disable: disableVal, value:name"/>
    <span data-bind="text:disableVal"></span><br/>
    <hr/>
</div>

<div>
    <h3>Event Bindings</h3>
    Details are visible: <span data-bind="text:detailsAreVisible"></span>
    <div data-bind="text:name, event:{mouseover:showDetails, mouseout:hideDetails}"></div>
    <div data-bind="visible:detailsAreVisible" style="border:red 2px solid">
        some details <br/>
        some more details <br/>
        a lot of details <br/>
    </div>
    <hr/>
</div>

<div>
    <h3>CSS and Style Bindings</h3>
    Is <span data-bind="text:num"></span>  positive : <span data-bind="text:numIsPositive()"></span><br/>
    Inline Styling : <input type="text" data-bind="value:num, style:{color: numIsPositive() ? 'green' : 'red'}"/><br/>
    CSS Styling : <input type="text" data-bind="value:num, css:{pos: numIsPositive(), neg: !numIsPositive()}"/>
    <hr/>
</div>

<div>
    <h3>Focus Bindings</h3>
    <input type="checkbox" data-bind="hasfocus:cbHasFocus"/>
    <input type="text" data-bind="hasfocus:tbHasFocus"/>
    <button data-bind="hasfocus:btnHasFocus, click:setTextBoxFocus">Set Focus</button>
    <br/>
    <span data-bind="visible:cbHasFocus">Checkbox has focus</span>
    <span data-bind="visible:tbHasFocus">Textbox has focus</span>
    <span data-bind="visible:btnHasFocus">Button has focus</span>
    <hr/>
</div>

<div>
    <h3>Attribute Bindings</h3>
    Anchor attribute :<span data-bind="text:googName"></span> <a data-bind="attr : {href:goog, title:googName}">here</a> <br/>
    Image attribute : <img data-bind="attr: {src:picSrc, alt:picAlt}"/>
    <hr/>
</div>

.pos{color: green;}
.neg{color: Red;}