如何根据淘汰赛js中的单选按钮选择填充文本框

Posted 2023-03-27

【中文标题】如何根据淘汰赛js中的单选按钮选择填充文本框

【英文标题】：How to populate a textbox based on radio button selection in knockout js

【发布时间】：2020-02-17 09:56:55

【问题描述】：

我是淘汰 js 的新手。 我有一个带有三个选项和一个文本框的单选按钮组。

如果我在单选按钮中选择选项 1，我需要在文本框中显示“12”。 如果我选择选项 2，我需要在文本框中显示“23”并在 UI 中的文本框旁边显示一个新的复选框“使用的选项 2”。 如果我选择选项 3，我需要在文本框中显示“34” - （如果选择了选项 2/3，则需要隐藏复选框。

我尝试在文本框值中使用单选按钮的数据绑定。 问题是单选按钮的值与我需要在文本框中显示的值不同。

<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>

【参考方案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" />

【讨论】：

看起来不错，但是根据要求，单选按钮的值与需要在文本框中显示的值不同。 -> 如果单选按钮的值为 1 - 文本框应为“12” -> 如果单选按钮的值为 2 - 文本框应为“23” -> 如果单选按钮的值为 3 - 文本框应是“34”