javascript - 复选框不会检索该行中的值

Question

在我的表中，我有多行，并且所有行都有一个复选框，我试图在已选中该复选框的行上检索 VORD5 值:

$(document).ready(function() {
  $('input[name=review]').change(function() {
    if ($('input[name=review]').is(':checked')) {
      var row = $(this).closest("tr");
      var ordNum = row.find(".VORD5a").text();

      console.log(ordNum);

      jQuery.ajax({
        url: 'B2BORD060.PGM',
        type: 'POST',
        data: {
          task: 'saveReview',
          VORD5a: ordNum.val(),
          Checked: 'Yes'
        },
      })

    } else {
      alert('Not checked');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr class="altcol1">
    <input type="hidden" name="VORD5a" value="02704953" />
    <input type="hidden" name="VLINE5a" value="0001" />
    <td class="text" class="VORD5">2704953</td>
    <td class="text num">1</td>
    <td class="text num">20180417</td>
    <td class="text num">52411</td>
    <td class="text"> <input type="checkbox" name="review" value="yes" /></td>
  </tr>
</table>

在上面的 jquery 中，我试图在 ordNum var 中检索 VORD5 值，目前检索的是空白值，有什么想法吗？谢谢

Answer 1

主要问题来自以下行中的选择器:

var ordNum = row.find(".VORD5a").text();

当文档中没有类 VORD5a 时，您正尝试使用类属性 .VORD5a 进行选择。

您需要使用 name 属性作为选择器，例如:

var ordNum = row.find("input[name='VORD5a']");

注意:您还需要删除 .text() 否则您将在 ordNum 中存储一个空字符串，因为输入有没有文字，那么你不能在你输入的字符串上使用 .val() :

VORD5a: ordNum.val(),

$(document).ready(function() {
  $('input[name=review]').change(function() {
    if ($(this).is(':checked')) {

      var row = $(this).closest("tr");
      var ordNum = row.find("input[name='VORD5a']");

      console.log(ordNum.val());

      jQuery.ajax({
        url: 'B2BORD060.PGM',
        type: 'POST',
        data: {
          task: 'saveReview',
          VORD5a: ordNum.val(),
          Checked: 'Yes'
        },
      })

    } else {
      alert('Not checked');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="altcol1">
    <input type="hidden" name="VORD5a" value="27049511" />
    <input type="hidden" name="VLINE5a" value="0001" />
    <td class="text" class="VORD5">27049511</td>
    <td class="text num">1</td>
    <td class="text num">20180417</td>
    <td class="text num">52411</td>
    <td class="text"> <input type="checkbox" name="review" value="yes" /></td>
  </tr>

  <tr class="altcol2">
    <input type="hidden" name="VORD5a" value="27049522" />
    <input type="hidden" name="VLINE5a" value="0002" />
    <td class="text" class="VORD5">27049522</td>
    <td class="text num">2</td>
    <td class="text num">20180417</td>
    <td class="text num">52411</td>
    <td class="text"> <input type="checkbox" name="review" value="yes" /></td>
  </tr>

  <tr class="altcol3">
    <input type="hidden" name="VORD5a" value="27049533" />
    <input type="hidden" name="VLINE5a" value="0003" />
    <td class="text" class="VORD5">27049533</td>
    <td class="text num">3</td>
    <td class="text num">20180417</td>
    <td class="text num">52411</td>
    <td class="text"> <input type="checkbox" name="review" value="yes" /></td>
  </tr>
</table>