Javascript KnockoutJS绑定单选复选框标签和元素

我有带有标签的单选复选框，其中包含类名，如“产品、产品类型和续订日期”。我正在尝试将这些绑定到一个结果表。其中一列为产品，另一列为产品类型，另一列为更新日期

目前我能提取的似乎只是输入的值。但是如何提取标签的html并将其放入表单元格中呢

代码笔：

HTML:

<ul>
<li>
<input type="checkbox" value="1" data-bind="checked: selectedProduct">
<label><strong><span data-bind="product">Product A</span></strong> - <span data-bind="productType" class="productType">Product A Type</span> <span class="renewalDate">Due on <strong><span data-bind="renewalDate">18-07-17</span></strong></span></label>
  </li>
<li>
<input type="checkbox" value="2" data-bind="checked: selectedProduct">
<label><span class="product"><strong>Product B</strong></span> - <span class="productType">Product B Type</span> <span class="renewalDate">Due on <strong>12-06-17</strong></span></label>
</li>       
<li>
<input type="checkbox" value="3" data-bind="checked: selectedProduct">
<label><span class="product"><strong>Product C</strong></span> - <span class="productType">Product C Type</span> <span class="renewalDate">Due on <strong>18-07-17</strong></span></label>
</li>
</ul>

<table>
<tbody>
<tr>
  <td data-bind="text: displayedProduct"></td>
</tr>
</tbody>
</table>

var viewModel= function () {

 var self = this;

self.selectedProduct = ko.observableArray();
self.displayedProduct = ko.computed(function() {
  var str = "";
ko.utils.arrayForEach(self.selectedProduct(), function(item) {
  str += item + " ";                                
});         
return str;
});
};

ko.applyBindings(new viewModel());

---

如果您不想通过使用单独的视图模型和

foreach

或

template

绑定来构建UI，可以使用

checkedValue

绑定

此绑定允许您指定选中复选框时要存储的值：

<input type="checkbox" data-bind="checked: selectedProduct, 
                                  checkedValue: 'Product A'">

产品A-产品A类型于2017年7月18日到期


产品B-产品B类型于2017年6月12日到期


产品C-产品C类型于2017年7月18日到期

• 使用名称、日期、值、类型和isSelected为产品创建viewmodel
• 创建产品数组并呈现复选框，而不是硬编码的li
• 可以使用相同的模板渲染li，也可以显示选定的项目

在这里找到小提琴-

HTML

---

您应该有一个用于显示所需详细信息的模板，而不是data bind=“text:displayedProduct”，并在选择时将所选项目的所需数据传递给模板，但如何从所选的单选复选框中获取标签数据？通常，我有一个包含名称、类型、，更新数据等。我将创建一个产品数组，以便我可以执行循环以显示复选框，以避免硬编码详细信息（本例中的名称、类型、数据）。现在，当选中复选框时，您可以获得整个产品对象，而不是纯文本/id。将此选定产品对象传递到模板，然后就可以了…谢谢，我会尝试的。确定。尝试一下，如果有任何问题，请告诉我。谢谢你。是的，谢谢！我确实有一个问题，我从stackoverflow中删除了（以防你看到），但这只是我的一个输入错误。但我能让它在我这边起作用。现在只是摆弄一下，试图为每种产品获得一个单独的ID。@Pizdets-好的，如果这有帮助，请标记为答案。没问题。说这是我15岁以下的时候录制的。@Pizdets-也许你试过投票了。我认为应该有一个选项将此标记为答案。

<ul>
    <li data-bind="foreach: products">
    <input type="checkbox" data-bind="checked: isSelected, value: name"/>

<span data-bind="template: { name: 'product-template', data: $data }"></span>

  </li>

</ul>

<table>
  <tbody>
    <tr>
      Selected Items<br/>
      <span data-bind="foreach: products">
        <span data-bind="if: isSelected">
        <span data-bind="template: { name: 'product-template', data: $data }"></span>
          <br/>
        </span>
      </span>

    </tr>
  </tbody>
</table>

<script type="text/html" id="product-template">

    <label><strong><span data-bind="text:name"></span></strong> - <span data-bind="text:productType" class="productType"></span> <span class="renewalDate">Due on <strong><span data-bind="text:renewalDate"></span></strong></span></label>     

</script>

var viewModel= function () {

  var self = this;

    self.products = ko.observableArray();

  self.products.push(new product(1, 'Product A', '18-07-17','Product A Type'));
  self.products.push(new product(2, 'Product B', '18-08-17','Product B Type'));
  self.products.push(new product(3, 'Product C', '18-10-17','Product C Type'));  

};

var product = function(value,name, date, type) {
  var self = this;
  self.value = value;
  self.name = ko.observable(name);
  self.renewalDate = ko.observable(date);
  self.productType = ko.observable(type);
  self.isSelected = ko.observable(false);
};

ko.applyBindings(new viewModel());