Handlebar中checkbox多值传递：如何同时传invoice NO与总金额至支付页？

Hey Andy, let's sort out this checkbox issue so you can reliably send selected invoice details to your payment page. The core problem right now is that your hidden input fields don't know whether their matching checkbox is checked—so they'll send data even for unselected invoices. Here's a step-by-step fix:

The Core Problem Breakdown #

Your current setup has hidden selected_invoice_no[] inputs that get included in submissions regardless of checkbox state. We need to directly link each checkbox to its invoice number and amount, then only collect data for checked items.

Step 1: Clean Up the Handlebars Template #

First, update your table rows to associate checkboxes with their invoice data using data-* attributes (duplicate IDs were also causing DOM issues—we'll remove those):

<table data-role="table" id="tblInvoice" data-filter="true" data-input="#filterTable-input" class="table-stroke table-stripe ui-responsive">
  <thead>
    <tr>
      <th colspan="8" style="text-align:center;font-size:20pt;">Open Invoices</th>
    </tr>
    <tr>
      <th width="10%"><input type="checkbox" id="check_all"/></th>
      <th>Company_code</th>
      <th>Invoice No.</th>
      <th>Invoice Type</th>
      <th>Invoice Date</th>
      <th>Due Date</th>
      <th>Invoice Status</th>
      <th>Open Amount</th>
    </tr>
  </thead>
  <tbody>
    {{#if invoices}}
      {{#invoices}}
      <tr>
        <td>
          <!-- Link checkbox to invoice data with data attributes, remove duplicate IDs -->
          <input class="invoice-checkbox" type="checkbox" 
                 data-invoice-no="{{invoice_no}}" 
                 data-open-amount="{{open_amount}}"
                 style="display:{{display}};" />
          <!-- No need for hidden inputs anymore—we'll collect data via JS -->
        </td>
        <td style="white-space:nowrap;">{{company_code}}</td>
        <td style="white-space:nowrap;">{{invoice_no}}</td>
        <td style="white-space:nowrap;">{{invoice_type}}</td>
        <td style="white-space:nowrap;">{{invoice_date}}</td>
        <td style="white-space:nowrap;">{{due_date}}</td>
        <td style="white-space:nowrap;"><font color="{{color}}">{{status}}</font></td>
        <td style="white-space:nowrap;">{{open_amount}}</td>
      </tr>
      {{/invoices}}
    {{else}}
      <tr>
        <th colspan="8"><div style="font-style:italic; color:red; text-align:center;">No Open Invoice</div></th>
      </tr>
    {{/if}}
  </tbody>
</table>

Step 2: Update the Sum Calculation Logic #

Keep your total amount function but use the new data-* attributes for clarity, and add support for the "select all" checkbox:

var $cbs = $('.invoice-checkbox'); 

function calcUsage() {
  var total = 0;
  $cbs.each(function() {
    if (this.checked) {
      // Fetch amount directly from the checkbox's data attribute
      total += parseInt($(this).data('open-amount'));
    }
  });
  $("#select_total").text('MYR' + total);
}

// Use change event instead of click (more reliable for checkboxes)
$cbs.on('change', calcUsage);

// Add select all functionality
$('#check_all').on('change', function() {
  $cbs.prop('checked', this.checked);
  calcUsage(); // Recalculate total when all are toggled
});

Step 3: Collect Selected Data and Send to Payment Page #

Add a function to gather checked invoices when the user clicks a "Proceed to Payment" button (adjust the button selector to match your UI):

$('#proceed-to-payment').on('click', function(e) {
  e.preventDefault();
  
  // Gather all selected invoices
  var selectedInvoices = [];
  $cbs.filter(':checked').each(function() {
    selectedInvoices.push({
      invoiceNo: $(this).data('invoice-no'),
      amount: $(this).data('open-amount')
    });
  });

  // Show alert if no invoices are selected
  if (selectedInvoices.length === 0) {
    alert('Please select at least one invoice to proceed.');
    return;
  }

  // Option 1: Send via POST form submission (recommended for payment data)
  var paymentForm = $('<form>', {
    action: '/your-payment-page-url', // Replace with your actual payment page path
    method: 'POST'
  });

  // Add selected invoices as hidden inputs
  $.each(selectedInvoices, function(index, invoice) {
    paymentForm.append($('<input>', {
      type: 'hidden',
      name: `selected_invoices[${index}][invoice_no]`,
      value: invoice.invoiceNo
    }));
    paymentForm.append($('<input>', {
      type: 'hidden',
      name: `selected_invoices[${index}][amount]`,
      value: invoice.amount
    }));
  });

  // Add total amount for easy access on payment page
  paymentForm.append($('<input>', {
    type: 'hidden',
    name: 'total_amount',
    value: $('#select_total').text().replace('MYR', '')
  }));

  // Submit the form
  paymentForm.appendTo('body').submit();

  // Option 2: Send via URL query params (only for non-sensitive data)
  // var queryParams = $.param({ selected_invoices: selectedInvoices });
  // window.location.href = `/your-payment-page-url?${queryParams}`;
});

Step 4: Access Data on the Payment Page #

On your payment page, you can retrieve the submitted data using your server-side language:

• For POST requests: The selected_invoices array will contain each invoice's number and amount, plus the total_amount value.
• For GET requests: Parse the query string to extract the same data.

Key Fixes & Improvements #

• Removed duplicate IDs: Fixed potential DOM conflicts caused by repeated checkInvoice and checkamount IDs.
• Direct data linking: Used data-* attributes to tie each checkbox to its invoice details, making data collection straightforward.
• Controlled data submission: Only sends data for checked checkboxes, so you won't pass unnecessary or incorrect invoice info.
• Select all support: Added logic to update totals and toggle all checkboxes at once.

内容的提问来源于stack exchange，提问作者Andy Hui