Using .each() to loop through checked checkboxes and .append data

Question

I have a series of rows in a table each with different values (prices) and each row has a checkbox. This table is generated through a PHP loop.

echo "<table border='0' cellpadding='10' id='booking-list'><tr>";
echo "<th>Booking ID</th><th>Customer ID</th><th>Start Date</th><th>Course Name</th><th>Amount Due</th><th>Date Payment Due</th><th>Add to basket</th></tr>";
$x = 0; 
while ($row = mysql_fetch_assoc($query)) {
    $balance = $row['price'] - $row['deposit'];

    echo "<td>" .$row['booking_id']. "</td><td>" .$cust_id. "</td><td>" .$row['start_date']. "</td><td>" .$row['name']. "</td><td>" .$balance. "</td><td>" .$row['balance_due_date']. "</td><td><input type='checkbox' name='' value='" .$x. "' /></td></tr>";
    $x++;
}
echo "</tr><table>";

For every check box that is checked, I'd like to add (.append) the specific value ($balance) to a form input field. The appending part seems to be working but I'm not sure how to loop through each checked checkbox in jQuery to grab the value I need.

function(){
    $('#booking-list input:checkbox').change(
        function(){
            if ($(this).is(':checked')) {
        $('<input />').attr({
                type: 'text',
            id: 'foo',
            name: 'bar',
        value: '<?php echo $balance; ?>'
        }).appendTo('#paypal-form form').text($(this).val());              
            } else {
                $('#paypal-form input:contains('+$(this).val()+')').remove();
            }
        }); 

Right now, I can only get the last $balance value generated.

Thanks.

Solution 1

You are using $balance after the loop, that's why you are only getting the last value.

To use the value directly in the event handler, you would have to create a separate event handler for each checkbox inside the loop. Instead you can put the balance value in the data for the checkbox:

<input type='checkbox' name='' value='" .$x. "' data-balance='" .$balance. "' />

Then you can use it in the event handler:

value: $(this).data('balance')

Side note: Right now you only have code for adding inputs, so if someone checks something and then unchecks it, the input is still there.

Solution 2

To select all checked checkboxes you can do:

  $('#booking-list input:checkbox:checked').each(function(){
      $(this).doSomething();//this is the checked checkbox
  });

Solution 3

I think maybe it's because you're reusing the id for the input. Have you tried putting the id of the input as the $cust_id?

syntax of each below:

$('selector').each(function (index, currentObject) {
   // index starts with 0
   $(currentObject).doSomething();
});