如何在 JavaScript 中获取检查的行输入字段值？

Question

我有一个数据表，其中一列设置为输入字段，所以我需要选中行复选框的所有输入字段值

我试试这个，但我只得到其他文本数据，我没有得到输入字段数据

var 值 = 新数组（）；

$.each($(".admin__control-checkbox:checked").closest("td").siblings("td"),
    function() {
        values.push($(this).text());
        $("#qty").each(function() {
            values.push($(this).val());
        });



    });

alert("val---" + values.join(", "));

Answer 1

一个问题似乎是您在更改复选框时没有运行任何事件。

我做了一个小例子，它将展示如何根据您提供的代码完成此操作。

$(".admin__control-checkbox").change(function() {
  var values = new Array();
  $(".admin__control-checkbox:checked").each(function() {
    var v = $(this).closest("tr").find(':input[type="number"]').val() || 0
    values.push(v)
  });
  alert("val---" + values.join(", "));
})

演示

 $(".admin__control-checkbox").change(function() { var values = new Array(); $(".admin__control-checkbox:checked").each(function() { var v = $(this).closest("tr").find(':input[type="number"]').val() || 0 values.push(v) }); alert("val---" + values.join(", ")); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td> <input type="checkbox" class="admin__control-checkbox" /> </td> <td>test</td> <td> <input type="number" value="1"> </td> </tr> <tr> <td> <input type="checkbox" class="admin__control-checkbox" /> </td> <td>test</td> <td> <input type="number" value="2"> </td> </tr> <tr> <td> <input type="checkbox" class="admin__control-checkbox" /> </td> <td>test</td> <td> <input type="number" value="3"> </td> </tr> </tbody> </table>

Answer 2

首先，您应该为所有复选框提供一个唯一值，例如 ID。 之后，您必须创建一个具有您为复选框提供的唯一值的 id。 您可以循环所有选中的复选框，并获取 ID 输入的值及其值。

 var myValues = []; $('input[name="test"]:checked').each(function() { myValues.push($('#input-'+this.value).val()); }); console.log('MY VALUES: ', myValues);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td><input type="checkbox" checked name="test" value="1"/></td> <td>Test</td> <td>Test</td> <td><input type="text" id="input-1" value="test input value" /></td> </tr> <tr> <td><input type="checkbox" checked name="test" value="2"/></td> <td>Test</td> <td>Test</td> <td><input type="text" id="input-2" value="test input value" /></td> </tr> <tr> <td><input type="checkbox" name="test" value="3"/></td> <td>Test</td> <td>Test</td> <td><input type="text" id="input-3" value="" /></td> </tr> </table>

Answer 3

您可以在单击复选框时将 class 或属性添加到文本框，然后只需 select 所有具有特定 class 的文本框。

例如，$(".checkedQuantity")

或者

var checkedItems = $(".admin__control-checkbox:checked");
for (var i = 0; i < checkedItems.length; i++) {
    var currentTextbox = $(checkedItems[i]).parent("tr").find(".qty");
    console.log(currentTextbox .val());
}

不要对多个元素使用相同的 id，我将 #qty 更改为.qty