JSFiddle - React, Tailwind, and code Playground

by Vikash Kumar Gupta

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.4.2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons" data-bind="foreach: kpiCategory">
  <label data-bind="css: {'btn btn-primary' : true, 'active': $data.is_checked }, attr:{title : $data.title}">
    <input type="checkbox" data-bind="checked: $data.is_checked, attr:{ 'data-type': $data.category}, event:{change: $parent.checkForChange }">
    <span data-bind="text: $data.is_checked"></span>
    <i data-bind="attr: {class: $data.iconClass}"></i>
    <span data-bind="text: $data.title"></span>     
  </label>
</div>

JavaScript

class ViewModel{
	constructor(params){
		this.kpiCategory = ko.observableArray([{
                category: 'alert',
                title: 'Alert',
                iconClass: 'fa fa-exclamation alert-kpi',
                is_checked: ko.observable(false)
            },
            {
                category: 'anomalous',
                title: 'Anomalous',
                iconClass: 'fa fa-line-chart anomalous-kpi',
                is_checked: ko.observable(false)
            },
            {
                category: 'correlated',
                title: 'Correlated',
                iconClass: 'fa fa-line-chart correlated-kpi',
                is_checked: ko.observable(true)
            },
            {
                category: 'static',
                title: 'Static',
                iconClass: 'fa fa-line-chart static-kpi',
                is_checked: ko.observable(true)
            }
        ]);
      
  }
  
  checkForChange(data,event){
  	console.log(data.is_checked());
  	data.is_checked(!data.is_checked());
  }
}

$(document).ready(function () {
    ko.applyBindings(new ViewModel());
});