JSFiddle - React, Tailwind, and code Playground

by bombo

HTML

<table>
    <tr data-bind="click: handler">
        <td><input type="checkbox" data-bind="checked: checked" /></td>
        <td data-bind="text: checkedText"></td>
    </tr>
</table>

CSS

tr {
    cursor: default;
}

JavaScript

var isChecked = false,
    model = {
        checked: ko.observable(isChecked)
    };

model.handler = function (data, event) {
    isChecked = !isChecked;
    model.checked(isChecked);
    return true;
};

model.checkedText = ko.computed(function () {
    var checked = model.checked();
    if (checked) {
        return 'checked';
    }
    return 'unchecked';
});

ko.applyBindings(model);