jQuery 使用 .each() 遍历选中的复选框和 .append 数据

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12124938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:20:48  来源:igfitidea点击:

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

jqueryloopseach

提问by Chris J

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.

我在表中有一系列行,每行都有不同的值(价格),每行都有一个复选框。该表是通过 PHP 循环生成的。

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 forminput 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.

对于选中的每个复选框,我想将 ( .append) 特定值 ( $balance) 添加到form输入字段。附加部分似乎正在工作,但我不确定如何遍历 jQuery 中每个选中的复选框以获取我需要的值。

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 $balancevalue generated.

现在,我只能获取$balance生成的最后一个值。

Thanks.

谢谢。

回答by sabithpocker

To select all checked checkboxes you can do:

要选择所有选中的复选框,您可以执行以下操作:

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

回答by Guffa

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

$balance在循环之后使用,这就是为什么您只获得最后一个值的原因。

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.

旁注:现在你只有添加输入的代码,所以如果有人检查了某些东西然后取消选中它,输入仍然存在。

回答by Jason Dam

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?

我想也许是因为你在输入中重用了 id。您是否尝试将输入的 id 作为 $cust_id ?

syntax of each below:

下面每个的语法:

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

回答by Hossein

You can call this code on checkbox onClickevent too.

您也可以在复选框onClick事件上调用此代码。

$(':checkbox:checked').each(function() {

});