JQUERY中Uncaught TypeError读取quantity属性未定义问题排查

问题现象 #

选择1个或2个项目点击get all按钮时，触发错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'quantity')

选择所有项目时无此错误，尝试声明空数组未解决问题。

错误根源 #

get_data事件里的数组匹配逻辑存在问题：

• ar1 = $('input[class=checkni]').map(...) 会获取所有复选框（共3个），不管是否被选中添加
• ar2 = $('.quantity_input').map(...) 只获取已添加到页面的输入框（1或2个）
• 循环时用ar1.length作为上限，当i超过ar2.length时，ar2[i]是undefined，读取quantity就会报错

修复方案 #

直接通过已添加的.row元素关联id和数量，彻底避免数组索引不匹配的问题，这也是更可靠的实现方式：

修改后的get_data函数代码：

$("#get_data").click(function() {
  const merge = $('.row').map((i, row) => {
    const $row = $(row);
    return {
      id: $row.data('for').slice(2), // 从data-for属性提取id（如cb1 -> 1）
      quantity: $row.find('.quantity_input').val()
    };
  }).get();

  console.log(merge);
});

完整代码 #

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="Table1">
  <thead>
    <tr>
      <th>
        <input type="checkbox" id="allcb" name="allcb" />
      </th>
      <th>Price</th>
      <td>Quantity</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="checkni" id="cb1" name="cb1" />
      </td>
      <td>200</td>
      <td> 25</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="checkni" id="cb2" name="cb2" />
      </td>
      <td>300</td>
      <td>30</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" class="checkni" id="cb3" name="cb3" />
      </td>
      <td>400</td>
      <td>50</td>
    </tr>
  </tbody>
</table>
<br />
<button type="button" id="add_data">Add datas</button>
<button type="button" id="get_data">Get all</button>

<ul class="list-group mb-3 row whole-div-class"></ul>

JavaScript代码

$("#allcb").change(function() {
  $('tbody tr td input[type="checkbox"]').prop(
    "checked",
    $(this).prop("checked")
  );
});

$(document).on("keyup", ".quantity_input", function() {
  var $row = $(this).closest('.row');
  var value_input = 0;
  var price_value = 0;
  var total_value = 0;

  value_input = $(".quantity_input", $row).val();
  price_value = $(".price_value", $row).html();
  total_value = parseInt(value_input) * parseInt(price_value);
  $(".total_value_row", $row).text(total_value);
});

$(document).on("click", ".remove_data", function() {
  var $row = $(this).closest('.row');
  var checkboxName = $row.data('for');
  var $checkbox = $(`input[type="checkbox"][name="${checkboxName}"]`);
  
  $row.remove();
  $checkbox.prop('checked', false);
  $checkbox.get(0).hasCovered = false;
});

$(document).ready(function() {
  $("#add_data").click(function() {
    var grid = document.getElementById("Table1");

    var checkBoxes = grid.getElementsByTagName("INPUT");
    var str = ''

    for (var i = 0; i < checkBoxes.length; i++) {
      if (
        checkBoxes[i].checked &&
        checkBoxes[i].name !== "allcb" &&
        !checkBoxes[i].hasCovered
      ) {
        var row = checkBoxes[i].parentNode.parentNode;
        str +=
          '<div class="row" data-for="' + checkBoxes[i].id + '"><div class="col-md-8"><p class="me-3"> ' +
          '<a href="#" class="text-body">' +
          '<button type="button" class = "remove_data" id="remove_data">Remove item</button></a>&nbsp' +

          '<span>Quantity</span>&nbsp' +
          row.cells[2].innerHTML +
          "</a></p> " +
          '<span class="me-1">Price </span>&nbsp' +
          '<span class="me-1 price_value">' +
          row.cells[1].innerHTML +
          "</span>&nbsp" +
          '<input type="number" id="quantity_input" class="form-control form-control-sm w-px-75 quantity_input" value="1" min="1" max="5"/>&nbsp' +
          '<span class= "total_value_row" >total value is</span> ' +
          "</div><hr></div>";
        checkBoxes[i].hasCovered = true;
      }
    }
    $(".whole-div-class").append(str);
  });

  // 优化后的get_data函数
  $("#get_data").click(function() {
    const merge = $('.row').map((i, row) => {
      const $row = $(row);
      return {
        id: $row.data('for').slice(2),
        quantity: $row.find('.quantity_input').val()
      };
    }).get();

    console.log(merge);
  });
});

内容的提问来源于stack exchange，提问作者Henry