jQuery：循环打印一个值

Question

我有以下代码

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<table id="main_table">
    <tr>
        <td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
        <td><input name="qty[]" value="5.0000" type="text"></td> 
    </tr>
    <tr>
        <td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
        <td><input name="qty[]" value="2.0000" type="text"></td> 
    </tr>
    <tr>
        <td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
        <td><input name="qty[]" value="3.0000" type="text"></td> 
    </tr>   
</table>
<script>
jQuery('table#main_table').each( function(){  
    if(jQuery(this).find("input:checkbox").is(':checked')){
         var txt = jQuery(this).find("input[name='qty[]']").val();
         alert(txt);
    }
});

如果复选框被选中，我需要在表格中检查，然后打印它的数量值。但下面的代码只打印 1 个值。而不是全部

我错过了什么？

Answer 1

您的循环是针对 tr 而不是针对表的。

jQuery('table#main_table tr').each( function(){  
    if(jQuery(this).find("input:checkbox").is(':checked')){
         var txt = jQuery(this).find("input[name='qty[]']").val();
         console.log(txt);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
    <tr>
        <td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
        <td><input name="qty[]" value="5.0000" type="text"></td> 
    </tr>
    <tr>
        <td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
        <td><input name="qty[]" value="2.0000" type="text"></td> 
    </tr>
    <tr>
        <td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
        <td><input name="qty[]" value="3.0000" type="text"></td> 
    </tr>   
</table>

Answer 2

您在<table> 上使用each，它只会迭代一次，因为只有一个具有该ID 的表。遍历表中的<tr> 元素。

$('#main_table tr').each(function() {
    ...

jQuery('table#main_table tr').each(function() {
  if (jQuery(this).find("input:checkbox").is(':checked')) {
    var txt = jQuery(this).find("input[name='qty[]']").val();
    console.log(txt);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
  <tr>
    <td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
    <td><input name="qty[]" value="5.0000" type="text"></td>
  </tr>
  <tr>
    <td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
    <td><input name="qty[]" value="2.0000" type="text"></td>
  </tr>
  <tr>
    <td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
    <td><input name="qty[]" value="3.0000" type="text"></td>
  </tr>
</table>

有更好的方法来做到这一点。无需遍历 tr 并查找选中的复选框，您可以遍历选中的复选框并获取关联文本框的值。

$(this)                       // Will refer to the checkbox
    .closest('td')            // Get parent <td>
    .next()                   // Get next element i.e. next <td>
    .find('[name="qty[]"]')   // Find element with name attribute value as "qty[]"
    .val()                    // Get it's value

$('#main_table tr :checkbox:checked').each(function() {
  console.log($(this).closest('td').next().find('[name="qty[]"]').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
  <tr>
    <td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
    <td><input name="qty[]" value="5.0000" type="text"></td>
  </tr>
  <tr>
    <td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
    <td><input name="qty[]" value="2.0000" type="text"></td>
  </tr>
  <tr>
    <td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
    <td><input name="qty[]" value="3.0000" type="text"></td>
  </tr>
</table>