的OnChange获得首个TD值，如果选中复选框

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 - 勾选” +计数如。 “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); 
});