OnChange-Ereignis für jede Zeile in Tabelle ausführen - MVC

Question

MVC 5 - Razor, Javascript Anfänger Benutzer !!

Ich möchte gerne ein einfaches onchange-Ereignis ausführen, wenn ein Kontrollkästchen in der Tabelle geändert wird, aber die onchange funktioniert nur für die erste Zeile.

Ich habe gelesen, dass dies daran liegt, dass das Skript nur in der ersten Zeile ausgeführt wird und nicht für die nachfolgenden dynamisch gefüllten Daten ausgeführt wird.

Ich verstehe das, aber ich weiß nicht, wie ich es beheben soll ... Ich nehme an, dass ich für jedes Kontrollkästchen in jeder Zeile eine individuelle ID erstellen muss - ich weiß nicht, wie das geht.

Wenn die Kontrollkästchen unterschiedliche IDs haben, weiß ich nicht, wie ich auf sie verweisen soll, um die Onchange hinzuzufügen.

Hope das macht Sinn. Danke im Voraus.

@model IEnumerable<core_point.Models.RegisterEmployee_Step6Model> 

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Select the roles that you have been employed to do, by clicking the check-box...</h2> 

<table class="table"> 


    @foreach (var item in Model) 
    { 
     <tr class="h3"> 
      <td class="vert-align"> 
       <img src="@item.IconLocation" height="80" width="80" /> 
      </td> 

      <td class="vert-align"> 
       @Html.CheckBoxFor(modelItem => item.Selected, new { @id = "CheckBoxSelected" }) 
      </td> 

      <td class="vert-align"> 
       @Html.DisplayFor(modelItem => item.RoleDescription) 

      </td> 

      <td class="vert-align"> 
       @Html.TextBoxFor(modelItem => item.Role, new { hidden = "hidden"}) 
      </td> 
     </tr> 
    } 

</table> 
<div> 
    Roles selected:<input type="number" id="noSelected" value="0"/> 
</div> 

<script> 

    var fld_CheckBoxSelected = document.getElementById("CheckBoxSelected"); 
    var fld_noSelected = document.getElementById("noSelected"); 

    fld_CheckBoxSelected.onchange = function() { 

     if (fld_CheckBoxSelected == true) { 

      fld_noSelected = fld_noSelected.value + 1; 
     } 
     else 
     { 
      fld_noSelected = fld_noSelected.value - 1; 
     } 
    } 

</script> 

Answer 1

ersetzen id mit Klasse in CheckBoxFor:

<td class="vert-align"> 
    @Html.CheckBoxFor(modelItem => item.Selected, new {@class= "CheckBoxSelected"}) 
</td> 

In Javascript-Code Verwendung Brache Code:

(function($) { 
    var onChanged = function(){ 
     /*Do smth that you needed*/ 
    }; 
    $(function() { 
     $(".checkbox").on("change", onChanged) 
    }); 
}(jQuery)); 

Answer 2

Da alle Eingabefelder die gleiche ID-Wert "CheckBoxSelected" haben. Das ist ein ungültiger Markup. Id-Werte sollten eindeutig sein.

Sie können in Betracht ziehen, die ID aus dem Markup zu entfernen und eine CSS-Klasse zu verwenden.

@Html.CheckBoxFor(modelItem => item.IsSelected, new { @class = "mycheckBox" }) 

und mit jQuery-Bibliothek, hören mit dieser CSS-Klasse zum change Ereignisse auf das Eingangselement.

$(function(){ 

    $("input.mycheckBox").change(function(){ 
     var isSelected = this.checked; 
     alert("Checkbox changed"); 



     if (isSelected) { 
     $("#noSelected").val(parseInt($("#noSelected").val())+ 1)); 
     } 
     else 
     { 
     $("#noSelected").val(parseInt($("#noSelected").val()) - 1)); 
     } 
    }); 

}); 

den aktuellen Wert der Eingabe mit der ID noSelected ist ein numerischer Wert (sonst parseInt fehl) Unter der Annahme.