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而不是用于表。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您在each上使用<table>，它只会迭代一次，因为只有一个表具有该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>

jQuery：循环打印只有一个值

2 个答案: