https://stackoverflow.com/questions/75943184

by andrew rowe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<label><input type="radio" name="flong" value="21" data-bind="checked: coverLevel">21</label>
<label><input type="radio" name="flong" value="22" data-bind="checked: coverLevel">22</label>
<ul data-bind="visible:  coverLevel() == 21,  foreach: oneStar">
  <li>
    <span class='usp-icon' data-bind="text: $data"></span>
  </li>
</ul>
<ul data-bind="visible:  coverLevel() == 22,  foreach: twoStar">
  <li>
    <span class='usp-icon' data-bind="text: $data"></span>
  </li>
</ul>
<label>One Star<input data-bind="textInput: oneStarString"></label>
<label>Two Star<input data-bind="textInput: twoStarString"></label>

JavaScript

class ModelModel {
  constructor() {
    this.coverLevel = ko.observable("21");
    this.oneStarString = ko.observable('a,b,c');
    this.oneStar = ko.computed(() => this.oneStarString().split(','));
    this.twoStarString = ko.observable('d,e,f');
    this.twoStar = ko.computed(() => this.twoStarString().split(','));
  }
}
const model = new ModelModel();

window.addEventListener('load', () => {
  ko.applyBindings(model);
});