如何获取 knockout.js 单选按钮上的值和标签？

Question

我的模型既保存了一组中每个单选选项的数值分数（数值），也保存了每个相同单选选项的标签（文本）。

考虑一项调查 - 每个问题的提示回答因问题而异。

<td data-bind="foreach: allowed_responses"><input type="radio" data-bind="value: score, checked: $parent.selectedResponse" /><span data-bind="text: label"></span></td>

然后我的javascript会给我选中的单选按钮的数值。

self.getSelectedScores = function() {
....
"score": questions[i].selectedResponse()
....

如何获取所选单选按钮的标签？

Answer 1

通过使用 checkedValue 绑定。它将整个对象作为选定值，而不仅仅是分数。

var viewModel = function(){
  var self = this;
  self.allowed_responses = ko.observableArray([
    {
      'score' : 1,
      'label' : 'One'
    },
    {
      'score' : 2, 
      'label': 'Two'
    }
  ]);
  
  self.selectedResponse = ko.observable();
  self.getSelectedScoreandLabel = function(){
    console.log('label: ' + self.selectedResponse().label);
    console.log('value: ' + self.selectedResponse().score);
  };
}

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- ko foreach: allowed_responses -->
<td>
  <input type="radio" data-bind="value: score, checkedValue: $data, checked: $root.selectedResponse" />
  <span data-bind="text: label"></span>
</td>
<!-- /ko -->
<br>
<br>
<button data-bind="click: getSelectedScoreandLabel">Show response</button>

P.S。 foreach 似乎无法使用 <td>，所以我使用了虚拟元素。

如何获取 knockout.js 单选按钮上的值和标签？

How can I get the value AND label on a radio button in knockout.js?

javascript

knockout.js