KnockoutFiddleAlert

by Leonardo Trimarchi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
Send E-Mail To
<ul data-bind="foreach: recipients">
  <li>
    <input type="radio" name="group" data-bind="value: itemName, checked: $root.currentAnswer" /> <span data-bind="text: itemName"></span>
  </li>
</ul>
Is the Current<label data-bind="text: currentAnswer"></label>
Send E-Mail To
<div data-bind="visible: showStates()">
<ul data-bind="foreach: states">
  <li>
    <input type="checkbox" name="group" data-bind="value: itemName, checked: $root.currentState" /> <span data-bind="text: itemName"></span>
  </li>
</ul>
Is the Current state<label data-bind="text: currentState"></label>
</div>

CSS

ul {
  list-style-type: none;
}

JavaScript

function AnswerVM() {
  var self = this;
  self.recipients = ko.observableArray([{
    itemName: 'Internal'
  }, {
    itemName: 'Rsd'
  },{
    itemName: 'General Agents/GA Lead Participants'
  },{
    itemName: 'Agents'
  },{
    itemName: 'Policyholders'
  },{
    itemName: 'Marketing Groups'
  },{
    itemName: 'Distribution Channel'
  },{
    itemName: 'Prospective Worksite Agents'
  },{
    itemName: 'Others'
  }]);
  self.states = ko.observableArray([{
    itemName: 'FL'
  }, {
    itemName: 'GA'
  },{
    itemName: 'OK'
  },{
    itemName: 'HI'
  },{
    itemName: 'SC'
  },{
    itemName: 'NC'
  },{
    itemName: 'DC'
  },{
    itemName: 'CO'
  },{
    itemName: 'MA'
  }]);
  
  self.currentState = ko.observableArray([]);
  self.currentAnswer = ko.observable();
  self.showStates = ko.observable(false);
  self.currentAnswer.subscribe(function(newValue) {
   if(newValue == 'Internal') {  
    self.showStates == "true";
   }
   else if(newValue == 'Agent') {

   }

});
}
ko.applyBindings(new AnswerVM());