JSFiddle - React, Tailwind, and code Playground

by Richard Collette

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css">
<input type="checkbox" id="che"  value="" data-bind="checked: IsSelected" />

<label for="che" id="lab"><img alt="" src="http://www.fallcreekbranding.com/images/icon-Checkbox.png"/>click me</label>
<input id="buttonInput" type="button" value="this works"/>
<input id="buttonInput2" type="button" value="this does not"/><br/>
IsSelected Value = <span data-bind="text: IsSelected"></span>

JavaScript

var viewModel = {
    IsSelected: ko.observable(false) // Initially false
};

ko.applyBindings(viewModel);

$(function() {

    function clickLabel(label) {
        if (label) {
            label.click();
            $("#" + label.attr("for")).triggerHandler("click");
        }
        return false;
    }

    function fixLabelImages() {
        $("label img").click(function(e) {
            var label = $(this).parents("label");
            e.stopPropagation();
            return clickLabel(label);
        });
    }

    //Shows how to programmatically toggle checkbox state.
    $('#buttonInput').click(function() {
        $("#lab").each(function() {
            clickLabel(this);
        });
    });
    
    //Shows a non-working checkbox toggle.
    $('#buttonInput2').click(function() {        
        viewModel.IsSelected(!viewModel.IsSelected());
    });

    //Apply JQueryUI buttons and button sets before fixing label issues.
    $("#che").button();
    //Fix images in labels.
    fixLabelImages();

});