OnChange ersten td Wert zu erhalten, wenn Checkbox

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> 

Checkbox-ID überprüft dynamisch hinzugefügt werden, "Worksmart-Checkbox" + zählen zB. „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> 

Ich versuche, den Wert des "hidden"td in der Tabelle auf die Reihe zu bekommen, wo das Kontrollkästchen aktiviert ist. Es gibt viele Checkboxen, aber wenn man angekreuzt ist, sind alle anderen deaktiviert.

Ich mag die versteckte td des geprüften Checkbox in der onChange Methode in einem Selet Tag zuzugreifen, die außerhalb der Tabelle sitzt.

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

Answer 1

Sie können einen CSS-Selektor verwenden, um eine einzelne geprüft Checkbox in einer Liste zu finden, und von dort aus den nächsten <td> lokalisieren und seine textcontent greifen. Sie brauchen das ID-Attribut nicht in der Checkbox, es sei denn, Sie würden etwas anderes damit tun.

$('#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); 
});