Question

Table   
 Checkbox Header1  Header2 Header 3
    x        foo      foo     foo
    o        foo      foo     foo
    o        foo      foo     foo
endTable

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<select>

动态添加复选框ID，“worksmart-checkbox”+计数例如。 “worksmart-checkbox1”

<table class="table table-responsive table-striped table-condensed">
    <tr>
        <th>
            Select
        </th>
        <th hidden>Value</th>
        <th>
            @Html.DisplayNameFor(model => model.Firstname)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Lastname)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Address)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Postcode)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CaseReference)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DateOfBirth)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SpouseFirstname)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SpouseLastname)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SpouseAddress)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SpousePostcode)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
        {
        <tr>
            <td>
                <input type="checkbox" class="checkbox" id="@item.ElementID" />
            </td>
            <td hidden>@item.ApplicantID</td>
            <td>
                @Html.DisplayFor(modelItem => item.Firstname)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Lastname)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Address)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Postcode)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CaseReference)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateOfBirth)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SpouseFirstname)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SpouseLastname)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SpouseAddress)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SpousePostcode)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.ApplicantID })
            </td>
        </tr>
    }
</table>

我正在尝试在选中复选框的行的表中获取"hidden" td的值。有许多复选框，但如果选中一个复选框，则所有其他复选框都被禁用。

我想在位于表格外的selet标签中访问onChange方法中已选中复选框的隐藏td。

$('#worksmart-select').on("change", function () {
       // get first td val
    });

Answer 1

您可以使用CSS选择器在列表中查找单个选中的复选框，然后从中找到下一个<td>并获取其textContent。你不需要复选框上的id属性，除非你打算用它做其他的事情。

$('#worksmart-select').on("change", function () {
    // find the checked checkbox
    var $chosen = $('td > input:checked');
    // we want the next td's content, so go up to our parent() node, then across to the next() td node, then grab its text
    var appId = $chosen.parent().next().text();
    // do something with appId
    console.log(appId);
});

如果选中复选框，OnChange将获得第一个td值

1 个答案: