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

淘汰-如何将动态填充的复选框转换为单选按钮(是/否)?

radio-button knockout.js jquery javascript

lily · 技术社区 · 7 年前

我有一个复选框,可以动态填充对象数组,但我现在需要将其转换为单选按钮,以允许用户选择是或否(而不是一个复选框)

<!--
From (checkboxes):
   [] Customer 1
   [] Customer 2

To (radio button Yes/No options):

  Customer 1 (customer code)
  [] Yes
  [] No
-->

我有一把工作复选框,并尝试(尚未成功)将其转换为单选按钮- fiddle

根据fiddle,最终我需要发回所选客户的数组{cusotmerType,checkedvalue}

非常感谢您的建议,帮助我朝着正确的方向前进。非常感谢

function Customer(type,checked)
{
  var self = this;
  
  self.CustomerType = ko.observable(type); 
  self.IsChecked = ko.observable(checked || false);
}

function VM()
{
  var self = this;
  
  //dynamically populated - this is for testing puposes
  self.AllCustomers = ko.observableArray([
    { 
      code: "001",
      name:'Customer 1'
    },
    { 
      code: "002",
      name:'Customer 2'
    },
    { 
      code: "003",
      name:'Customer 3'
    },
  ]);
  
 self.selectedCustomers = ko.observableArray([]);
 self.Customer = ko.observableArray([]); //I need to POST this back- all selected customers
  
//return all customers that checked the box
self.selectedCustomers.subscribe(function() {
self.Customer.removeAll();
  ko.utils.arrayForEach(self.selectedCustomers(), function(item) {
      self.Customer.push(new Customer(item, true));
  });
});

}
ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- ko foreach: AllCustomers -->
  <input type="checkbox" data-bind="value: $data.code, checked:$parent.selectedCustomers" /> 
   
  <span data-bind="text: $data.name"></span>
  <!-- /ko -->
  
  <h4>Selected customers</h4> 
  <div data-bind="foreach: Customer">
    <span data-bind="text: CustomerType"></span>
    <span data-bind="text: IsChecked"></span>
    <span>,</span>
  </div> 
  <br>
  <!-- I need to convert them into radio options 
  eg:
  Customer 1 (can be customer code)
  [] Yes
  [] No
  -->
  <strong>
  Not working yet..only one of the Yes/No can be selected among all cusotmers
  </strong><br><br>
   <!-- ko foreach: AllCustomers -->
   <span data-bind="text: $data.name"></span><br>
   <input type="radio" data-bind="value: $data.code,checked:$parent.selectedCustomers" />Yes
   <input type="radio" value="No" data-bind="checked:$parent.selectedCustomers" />No
   <br>
  <!-- /ko -->

1 回复 | 直到 7 年前

Priyanka Jain 7 年前

您的代码有很多问题,最重要的是:

单选按钮按组工作,可由指定 name 属性
淘汰赛对Observatearray的效果并不完全相同( selectedCustomers 在您的情况下)单选按钮和复选框上。

我更新了你的小提琴 https://jsfiddle.net/w75px6r2/7/ 我真的不知道我能改变什么,不能改变什么。所以我将输入和输出数组保持不变。我只更改了这两种方法之间的数据处理。基于此,您需要找出最佳解决方案。

在第一部分中,我只添加了另一个为查看而准备的数组,它只是扩展了原始项目 isSelected 可观察到。

那么我只是把它绑在视图中。现在您应该看到,复选框和单选按钮应该在同一视图中同时工作。

function Customer(type, name, checked) {
  var self = this;

  self.CustomerType = ko.observable(type);
  self.Name = ko.observable(name);
  self.IsChecked = ko.observable(checked || false);
}

function VM() {
  var self = this;

  //dynamically populated - this is for testing purpose
  self.AllCustomers = ko.observableArray([{
      code: "001",
      name: 'Customer 1'
    },
    {
      code: "002",
      name: 'Customer 2'
    },
    {
      code: "003",
      name: 'Customer 3'
    },
  ]);

  self.AllCustomersViewModel = ko.observableArray(
    self.AllCustomers().map(function(value) {
      value.isSelected = ko.observable(false);
      return value;
    }));

  self.selectedCustomers = ko.pureComputed(function() {
    var result = [];
    ko.utils.arrayForEach(self.AllCustomersViewModel(), function(item) {
      if (item.isSelected()) {
        result.push(item);
      }
    });
    return result;
  });
  self.Customer = ko.observableArray([]); //I need to POST this back- all selected customers

  //return all customers that checked the box
  self.selectedCustomers.subscribe(function() {
    self.Customer.removeAll();
    ko.utils.arrayForEach(self.selectedCustomers(), function(item) {
      self.Customer.push(new Customer(item.code, item.name, true));
    });
  });

}
ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- ko foreach: AllCustomersViewModel -->
<input type="checkbox" data-bind="checked: isSelected" />

<span data-bind="text: name"></span>
<!-- /ko -->

<h4>Selected customers</h4>
<div data-bind="foreach: Customer">
  <span data-bind="text: CustomerType"></span>
  <span data-bind="text: IsChecked"></span>
  <span>,</span>
</div>
<br>

<!-- I need to convert them into radio options 
  eg:
  Customer 1
  [] Yes
  [] No
  -->
<strong>
  Not working yet..only one of the Yes/No can be selected among all customers
  </strong><br><br>
<!-- ko foreach: AllCustomersViewModel -->
<span data-bind="text: name"></span><br>
<input type="radio" data-bind="value: true, checked: isSelected, attr: {name: $index}" />Yes
<input type="radio" data-bind="value: false, checked: isSelected, attr: {name: $index}" />No
<br>
<!-- /ko -->