代码之家 › 专栏 › 技术社区 › Maxcot

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

knockout.js javascript

0

Maxcot · 技术社区 · 8 年前

我的模型包含一个组中每个单选选项的数值分数(数值),以及每个同一单选选项的标签(文本)。

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

<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 回复 | 直到 8 年前

1

0

Ray 8 年前

通过使用 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>

附笔。 foreach 好像不在一起工作 <td> ,所以我使用了虚拟元素。