send information from multiple checkbox to array Knockout js

Question

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.

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>

Apply

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());
    }

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.

super cool · Accepted Answer · 2016-06-02 09:42:32Z

1

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 property makes sure when checked/unChecked the observable binded to it gets modified .

sample here

edited Jun 2, 2016 at 9:42

answered Jun 2, 2016 at 8:56

super cool

6,0653 gold badges34 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Masnad Nihit Over a year ago

I used your code, but I get a empty array, but when I just write console.log(item) it shows me 3 arrays

super cool Over a year ago

oops my bad !. updated now @MasnadNihit item.checkedInvoice1 is observable so read its value by () . cheers

Masnad Nihit Over a year ago

hey! I did the exact thing, problem is that when I am clicking the checked the observable value still is the same which is 0.. it does not change to 1, so I was thinking should I forcefully change it to 1 ?

super cool Over a year ago

nah ! yoo don't need to do forecully , check sample fiddle here jsfiddle.net/H7wLT/1522 . hope that clarifies @MasnadNihit & updated code

Masnad Nihit Over a year ago

but its weird that the checkbox in the viewmodel is not changing at all self.checkedInvoice1 = ko.observable(0);

|

Collectives™ on Stack Overflow

send information from multiple checkbox to array Knockout js

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related