我如何在敲门(snockout.js)单选按钮中获取值和标签?

时间:2018-08-06 03:31:34

标签: javascript knockout.js

我的模型既为组中的每个单选选项保存了一个数值分数(数值),又为每个相同的单选选项保留了一个标签(文本)。

想想调查-对每个问题的提示回答因问题而异。

<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()
....

我如何拿起所选单选按钮的标签?

1 个答案:

答案 0 :(得分:0)

通过使用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>一起使用,因此我使用了一个虚拟元素。