单击按钮时获取同一行中元素的值，每行一个按钮

Question

我有一个表格，其中每一行都包含一个按钮和一些元素。 我想在单击按钮时获取其中一些元素的值，然后将其传递给 Ajax 调用。

我的问题是获取这些元素的价值。

表格行如下所示：

<tr>
    <td>
        <input id="item_AllocationId" name="item.AllocationId" type="hidden" value="39">
        <input class="form-control input-width-medium text-box single-line" data-val="true" data-val-required="The Description field is required." id="item_Description" name="item.Description" type="text" value="Welcome Centre Rent">
    </td>
    <td>
        <div class="checker" id="uniform-item_GiftAidable"><span><input class="uniform checkbox" id="item_GiftAidable" name="item.GiftAidable" type="checkbox" value="true"></span></div><input name="item.GiftAidable" type="hidden" value="false">
    </td>
    <td>
        <div class="checker" id="uniform-isActive"><span class="checked"><input checked="checked" class="uniform checkbox" id="isActive" name="item.IsActive" type="checkbox" value="true"></span></div><input name="item.IsActive" type="hidden" value="false">
    </td>
    <td>
        <input class="update-allocation" type="submit" name="update-allocation" value="Update">
    </td>

</tr>

和 jQuery：

$(document).ready(function () {
    $('.update-allocation').click(function (event) {
        var isactive = $(this).parent().find('#isActive:checkbox:checked');
        alert(isactive);
    });
});

这至少找到了一个对象，但只要我把 .val() 放在那里，它就会出现 undefined。

这是jsFiddle

我是否朝着正确的方向前进？还是我完全迷失在 DOM 中？

仅供参考，HTML 是使用 ASP.Net Razor 生成的。

Answer 1

这里有一个例子 https://jsfiddle.net/m0nk3y/owoze110/5/

我所做的是缓存父行<tr>，然后将其用作参考。从那里您可以找到特定字段的值。我这样做是为了在这个例子中进行描述：

$('.update-allocation').click(function (event) {
    var $row = $(this).parents('tr');
    var desc = $row.find('input[name="item.Description"]').val();
    var gift = $row.find('input[name="item.GiftAidable"]').is(':checked');
    var isActive = $row.find('input[name="item.IsActive"]').is(':checked');

    alert('description: ' + desc + '\ngift aidable: ' + gift + '\nis active: '+isActive);
});

另外，我注意到您对所有输入都使用了相同的 ID 属性。我建议您改用 class，因为您应该只有一个 ID 实例。如果您还有其他问题，请告诉我。祝你好运。

Answer 2

jQuery always* 返回一个对象。在这种情况下，它返回的对象是空的，您无法从简单的alert(isactive) 中看出这一点（尽管您可以使用alert(isactive.length)）。

问题出在以下代码：

$(this).parent().find('#isActive:checkbox:checked')

.update-allocation 的父元素是它的td 元素，它不包含#isActive。

我建议使用.closest 来获取最近的父级tr：

$(this).closest("tr").find('#isActive:checkbox:checked')

查看更新的小提琴：http://jsfiddle.net/owoze110/1/

_{*除非你调用像 .is 这样的函数，否则不会。}