DOM traversing troubles

Question

I have table:

<table class="table table-striped" id="dane">
<tr>
    <th>
        Rezerwuj           
    </th>
    <th>
        Name
    </th>
    <th>
        Manufacturer
    </th>
    <th>
        ProjectName
    </th>
    <th>
        Name
    </th>
    <th>
        Name
    </th>
    <th>
        Surname
    </th>
    <th>
        Issue
    </th>
    <th>
        IssueDetails
    </th>
    <th></th>
</tr>

    <tr>
        <td style="vertical-align:middle">
            <div class="value">
                <input data-val="true" data-val-number="The field DeviceInstanceId must be a number." data-val-required="The DeviceInstanceId field is required." id="item_DeviceInstanceId" name="item.DeviceInstanceId" type="hidden" value="1" />

            </div>
        </td>
        <td style="vertical-align:middle">
            a
        </td>
        <td style="vertical-align:middle">
            b
        </td>
        <td style="vertical-align:middle">
            c
        </td>
        <td style="vertical-align:middle">
            d
        </td>
        <td style="vertical-align:middle">
            e
        </td>
        <td style="vertical-align:middle">
            f
        </td>
        <td style="vertical-align:middle">
            <input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
        </td>
        <td style="vertical-align:middle">
            Uszkodzona wtyczka ethernet
        </td>

    </tr>
    <tr>
        <td style="vertical-align:middle">
            <div class="value">
                    <input type="checkbox" />
                <input id="item_DeviceInstanceId" name="item.DeviceInstanceId" type="hidden" value="2" />

            </div>
        </td>
        <td style="vertical-align:middle">
            a   
        </td>
        <td style="vertical-align:middle">
            b
        </td>
        <td style="vertical-align:middle">
            c
        </td>
        <td style="vertical-align:middle">
            d
        </td>
        <td style="vertical-align:middle">
            e
        </td>
        <td style="vertical-align:middle">
            f
        </td>
        <td style="vertical-align:middle">
            <input class="check-box" disabled="disabled" type="checkbox" />
        </td>
        <td style="vertical-align:middle">

        </td>

    </tr>
    <tr>
        <td style="vertical-align:middle">
            <div class="value">
                    <input type="checkbox" />
                <input id="item_DeviceInstanceId" name="item.DeviceInstanceId" type="hidden" value="3" />

            </div>
        </td>
        <td style="vertical-align:middle">
            a
        </td>
        <td style="vertical-align:middle">
            b
        </td>
        <td style="vertical-align:middle">
            c
        </td>
        <td style="vertical-align:middle">
            d
        </td>
        <td style="vertical-align:middle">
            e
        </td>
        <td style="vertical-align:middle">
            f
        </td>
        <td style="vertical-align:middle">
            <input class="check-box" disabled="disabled" type="checkbox" />
        </td>
        <td style="vertical-align:middle">

        </td>

    </tr>


</table>
<button class="btn btn-default" id="MakeReservation">Rezerwuj</button>

And jQuery code:

$("#MakeReservation").click(function () {
    var Ids = new Array();
    $("input:checked").each(function () {
        Ids.push($.trim($(this).parentsUntil(".value").find("input").attr('value')));
    });
    console.log(Ids);
});                     

I want to read value property of a hidden input if checkbox in the same <div> is checked. but at this moment if none of the checkbox is checked JS return value of first input. If checkbox are checked code returns value of first and empty for inputs near checked checkboxes.

Here my JSFIDDLE Can anyone suggest me how to modify my jQuery code?

Answer 1

The hidden input fields is the next sibling of the checkbox, so you can use

$("#MakeReservation").click(function () {
    var Ids =$("input:checked").map(function () {
        return $(this).next().val()
    }).get();
    console.log(Ids);
});

Demo: Fiddle