JSFiddle - React, Tailwind, and code Playground

by SpAm

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
        <ul style="list-style-type:none;" data-bind="foreach:causes">
          <li><span data-bind="text:label"></span><input style="margin:5px;" type="radio" data-bind="checked:$root.cause, attr:{value:value}"/></li>
        </ul>
    </div>
    <div class="col-xs-6">
      <ul style="list-style-type:none;" data-bind="foreach:effectsSubset">
        <li><span data-bind="text:label"></span><input style="margin:5px;" type="checkbox" data-bind="checked:checked"/></li>
      </ul>
    </div>
  </div>


  
</div>

JavaScript

(function(){

  ko.bindingHandlers.toggleClick = {
    init: function (element, valueAccessor) {
      var value = valueAccessor();

      ko.utils.registerEventHandler(element, "click", function () {
        value(!value());
      });
    }
  };


function myModel() {
	var self = this;
  
  self.cause = ko.observable();
  
  
  self.effects = [
  	{
    	label:"Effect 1",
      checked:false,
      causes:[
      	"cause1",
        "cause3"
      ]
    },
  	{
    	label:"Effect 2",
      checked:false,
      causes:[
      	"cause1",
        "cause2"
      ]
    },
    {
    	label:"Effect 3",
      checked:false,
      causes:[
      	"cause4"
      ]
    }
  ];
  
  self.causes = [
  	{
    	label:"Cause 1",
      value:"cause1"
    },
  	{
    	label:"Cause 2",
      value:"cause2"
    },
  	{
    	label:"Cause 3",
      value:"cause3"
    },
    {
    	label:"Cause 4",
      value:"cause4"
    }
  ];
  
  self.effectsSubset = ko.computed(function(){
  	var effects = self.effects;
    return effects.filter(function(e){
    	return e.causes.indexOf(self.cause())!=-1;
    });
  });
  
}

var f = new myModel();

ko.applyBindings(f);

}());