How to populate a textbox based on radio button selection in knockout js

Question

I'm new to knockout js. I've a Radio button group with three options and a textbox.

If I select Option 1 in radio button, I need to show ,"12" in textbox. if I select Option 2, I need to show ,"23" in textbox and show a new check box "Used Option 2" ticked next to the textbox in UI. if I select Option 3, I need to show ,"34" in textbox - (Need to hide the checkbox if option 2/3 is selected.

I tried to use data-bind of radiobutton in textbox value. The issue is that the values of Radio buttons are different to the values I need to show in the Text box.

<div class="row">
  <div class="col-xs-12">
    <div class="form-group"
      data-bind="validationElement: CompanyStatement, validationOptions: {insertMessages: false}">
      <div>
        <label class="control-label">4 - Company Statement</label>
        <div class="Company-statement">
          <div>
            <span class="kp-radiobutton">
              <input name="CompanyStatement" type="radio" value="1"
                data-bind="checkedValue:  CompanyStatement" />
            </span>
            <span class="radio-message">This is my first option</span>
          </div>
          <div>
            <span class="kp-radiobutton">
              <input name="CompanyStatement" type="radio" value="2"
                data-bind="checkedValue:  CompanyStatement" />
            </span>
            <span class="radio-message">This is second option</span>
          </div>
          <div>
            <span class="kp-radiobutton">
              <input name="CompanyStatement" type="radio" value="3"
                data-bind="checkedValue:  CompanyStatement" />
            </span>
            <span class="radio-message">This is my third option.</span>
          </div>
        </div>
        <span class="validationMessage" data-bind="validationMessage: CompanyStatement"></span>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-6 form-group" data-bind="validationElement: MySelectedCode">
    <label class="control-label">5 - Selected Code </label>
    <input type="text" class="form-control" placeholder="MySelectedCode"
      data-bind="value: CompanyStatement" />
  </div>
</div>

Answer 1

ko.applyBindings(() => {
  var self = this;
  self.kvp = [12, 23, 34];
  self.selected = ko.observable(null);
  self.selectedValue = ko.computed(function() {
    return self.kvp[self.selected() - 1];
  });
});

label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- ko foreach: { data: kvp, as: 'key' } -->
<label><input type="radio" name="test" data-bind="checkedValue: $index()+1, checked: selected" /> <span data-bind="text: key"></span></label>
<!-- /ko -->
<input type="textbox" data-bind="value: selectedValue, enable: false" />
<input type="checkbox" data-bind="enable: false, visible: selected() == '2', checked: selected() == 2" />