JSFiddle - React, Tailwind, and code Playground

by Leonardo Trimarchi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
Question:
<ul data-bind="foreach: answers">
  <li>
    <input type="radio" name="group" data-bind="value: itemName, checked: $root.currentAnswer, AlertFunction" /> <span data-bind="text: itemName"></span>
  </li>
</ul>
<label data-bind="text: currentAnswer()"></label>

CSS

ul {
  list-style-type: none;
}

JavaScript

function AnswerVM() {
  var self = this;
  self.answers = ko.observableArray([{
    itemName: 'Answer 1'
  }, {
    itemName: 'Answer 2'
  }]);
  self.currentAnswer = ko.observable();
  self.AlertFunction = function() {
    if (self.currentAnswer == 'Answer1') {
      alert("True");
    }
    else if(self.currentAnswer == 'Answer2'){
    alert('False');
    }
  };

}

ko.applyBindings(new AnswerVM());