单击按钮时获取元素的值,每行一个按钮

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()就会出现未定义的内容.

这是一个jsFiddle

我正朝着正确的方向前进吗？或者我在DOM中完全迷失了？

仅供参考使用ASP.Net Razor生成HTML.

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实例.如果您还有其他问题,请与我们联系.祝好运.