的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); 
});