jQuery中获取输入值返回undefined问题求助

核心问题 #

点击"Get all input type data"返回undefined的原因：

• 你在$("#get_data").click事件里用$(this).closest('.row')获取父级.row，但#get_data按钮并不在任何.row容器内，导致$row是空的jQuery对象，后续$(".quantity_input", $row).val()自然取不到值，返回undefined。
• 当前循环的是表格里的复选框，和要获取的添加后的输入框没有对应关系，逻辑完全错误。

解决方案：遍历所有.row容器里的输入框 #

要获取每个.quantity_input的value并存入数组，必须遍历所有添加的.row元素，逐个提取输入框的值。

修正后的#get_data点击事件代码：

$("#get_data").click(function() {
  var selected_items = [];
  // 遍历所有包含输入框的.row容器
  $(".whole-div-class .row").each(function() {
    // 获取当前row里的quantity_input值
    var value_input = $(".quantity_input", this).val();
    // 将值存入对象并push到数组
    selected_items.push({ quantity: value_input });
  });
  // 打印验证结果
  console.log(selected_items);
});

完整修正后的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 message = "Values                 Description\n";

    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() {
    var selected_items = [];
    $(".whole-div-class .row").each(function() {
      var value_input = $(".quantity_input", this).val();
      selected_items.push({ quantity: value_input });
    });
    console.log(selected_items);
  });
});

说明 #

• 使用$(".whole-div-class .row").each()遍历所有添加的行容器，确保每个输入框都被处理。
• 在each回调里，this指向当前的.row元素，以此为上下文查找.quantity_input，就能准确获取对应的值。

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