从多个复选框发送信息到数组Knockout js [英] send information from multiple checkbox to array Knockout js

问题描述

我有一个视图模型，该模型包含要使用foreach在网站上显示的信息. 这就是它的样子. 当用户单击复选框中的两个时，可观察的结果变为true，我有一个按钮显示应用"，单击该按钮时，我想要做的是获取两行的整个viewmodel数组，或者将检查1行并将其放入一个数组中.这样我就可以将其发送到数据库.

i have a viewmodel which has information which I am showing on the site using foreach. This is how it looks. When the person clicks the checkboxes maybe 2 of them, the observable turns true, and I have a button which says apply and when that button is clicked what I want to do is get the whole viewmodel array for the two rows which is checked or maybe 1 row which is checked and put them into one array. so I can send it to the database.

所以基本上我这里有HTML.

So basically I have the HTML here.

<tbody data-bind="foreach: investmentinvoicedatasintable">
  <tr>
      <td class="text-center"><span data-bind="text: $data.invoiced_total"></span></td>
      <td class="text-center"><span data-bind="text: $data.paid_total "></span></td>
      <td class="text-center">
        <a href="#" data-bind="if: $data.status == 10,  click: $root.getRepaymentInvoice"><?php echo lang("invoice_table_pay1"); ?></a>
        <span data-bind="ifnot:  $data.status == 10"><?php echo lang("invoice_table_pay1"); ?></span>  
      </td>
      <td class="text-center"><div  data-bind="if: $data.status == 10" ><input type="checkbox" data-bind="checked: $data.checkedInvoice1"/></div>
          <div  data-bind="ifnot: $data.status == 10" ></div>
      </td>
  </tr>
 </tbody>

应用

这是Knockout js文件.

And here is the Knockout js file.

 /* Vew model for invoices data */
self.invoicedatasintable = ko.observableArray();
        function InvoiceViewModel(root /* root not needed */, invoice) {
            var self = this;
            self.ID = invoice.ID;
            self.type_related_amount = invoice.type_related_amount;
            self.type_related_paid = invoice.type_related_paid;
            self.ORIG_ID = invoice.ORIG_ID;
            self.Fullname = invoice.Fullname;
            self.status_description = invoice.status_description;
            self.type_txt = invoice.type_txt;

            self.checkedInvoice1 = ko.observable(0);

            self.getCheckedInvoiceInfo = function(checkedinvoice){
            if(checkedInvoice1){
                return checkedinvoice;
            }else{
                return 0;
            }
        }
        };

这是按钮功能，它需要检查视图模型并获取具有检查值(真)的数组，并将它们放入一个完整的数组中.

And here is the button function which needs to check the viewmodel and get the arrays which has the checked value (true) and put them into ONE whole array.

self.getCheckedInvoices = function(){
        self.arr = ko.observableArray();
         $.each( self.getCheckedInvoiceInfo(), function (index, item) {
                if(item.checkedInvoice1 == 0){
                    return false;
                }else{
                    self.arr.push(/*only the array which has checked 1 */ );
                }

            });
            console.log(self.arr());
    }

所以问题是我不确定如何调用invoiceViewModel来查看已检查的行信息，以及如何仅获取已检查的某些行. self.invoicedata()是将所有数组存储在表中显示的起始位置的

So the problem is I am not sure how to call the invoiceViewModel to see the checked row information and also how to get only the certain rows that is CHECKED. the self.invoicedata() is the one that has all the array stored in the starting which is displaying on the table.

推荐答案

Gotcha！您正在尝试遍历错误的一个. self.invoicedatasintable可观察到的所有数据

Gotcha ! you are trying to loop over wrong one . self.invoicedatasintable observable has all your data

viewModel:

self.arr = ko.observableArray();
self.getCheckedInvoices = function() {
  ko.utils.arrayForEach(self.invoicedatasintable(),function(item){ //use ko.utils foreach 
    if (item.checkedInvoice1()) { //it's a Boolean flag
      self.arr.push(item);
    }
  });
    console.log(self.arr());
}

Checkbox选中的属性可确保绑定到它的可观察对象checked/unChecked何时被修改.

Checkbox checked property makes sure when checked/unChecked the observable binded to it gets modified .

示例此处

这篇关于从多个复选框发送信息到数组Knockout js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！