JSFiddle - React, Tailwind, and code Playground
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"/></label><label for="che" id="lab"><img alt="" src="http://www.fallcreekbranding.com/images/icon-Checkbox.png"/></label>
JavaScript
$(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);
});
});
//Apply JQueryUI buttons and button sets before fixing label issues.
$("#che").button();
//Fix images in labels.
fixLabelImages();
});