JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="btn-group group-conditions">
  <label data-bind="click: toggleAND, css : {'active' : isActiveAND}">
    <input type="radio" value="AND">AND
  </label>
  <label data-bind="click: toggleOR, css : {'active' : isActiveOR}">
    <input type="radio" value="OR"> OR
  </label>
</div>

<div data-bind="text: output()"></div>

CSS

.active {
  background: green;
}

JavaScript

var viewModel = function() {
  var _this = this;
  _this.isActiveAND = ko.observable(false);
  _this.isActiveOR = ko.observable(false);
  _this.operator = ko.observable('AND');

  _this.toggleAND = function() {
    _this.operator('AND');
    _this.isActiveAND(!_this.isActiveAND());
    _this.isActiveOR(false);
  }

  _this.toggleOR = function() {
    _this.operator('OR');
    _this.isActiveAND(false);
    _this.isActiveOR(!_this.isActiveOR());
  }

  _this.output = function() {
    return _this.operator();
  }
}

ko.applyBindings(new viewModel());