JSFiddle - React, Tailwind, and code Playground
HTML
<ul data-bind="foreach: rows">
<li data-bind="click: function() { $parent.val($data); return true; }">
<input type="radio" name="my_radio" data-bind="value: $data, checked: $parent.val" />
<label data-bind="text: $data"></label>
</li>
</ul>
Value: <span data-bind="text: output"></span>
CSS
li:hover {
background-color: #EEE;
cursor: pointer;
}
li *:hover {
cursor: pointer;
}
JavaScript
function ViewModel() {
var self = this;
self.rows = ko.observableArray([1,2,3,4,5,6,7,8,9,10]);
self.val = ko.observable(2);
self.output = ko.computed(function() {
return self.val();
});
}
ko.applyBindings(new ViewModel());