テーブル内の各行に対してOnChangeイベントを実行する - MVC

Question

MVC 5 - 剃刀、Javascript 初心者ユーザー！

テーブルでチェックボックスが変更されたときに、単純なonchangeイベントを実行できるようにしたいのですが、onchangeは最初の行に対してのみ機能します。

これは、スクリプトが最初の行でのみ実行され、後で動的に入力されるデータに対して実行されないためです。

私はこれを理解していますが、それを修正する方法はわかりません...私は、各行の各チェックボックスに個別のIDを作成する必要があると仮定します。

また、チェックボックスのIDが異なる場合、私はそれらを参照してオンチェンジを追加する方法がわかりません。

希望はこれが理にかなっています。前もって感謝します。

@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

CheckBoxForにクラスとIDを置き換える：Javascriptのコード使用休閑コードで

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

：

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

Answer 2

をすべてご入力ボックスは、同じID値 "CheckBoxSelected" を持つことになりますので。これは無効なマークアップです。 IDの値は一意である必要があります。

マークアップからIDを削除し、CSSクラスを使用することを検討してください。

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

とjQueryライブラリを使用するには、このCSSクラスを持つinput要素のchangeイベントに耳を傾けます。 ID noSelectedと入力の現在の値を仮定

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

}); 

は（他parseIntが失敗する）数値です。