Как отобразить количество всех флажков, которые были проверены в таблице, asp.net MVC Razor

Question

У меня есть вид, как показано ниже

 <input type="checkbox"  />

 <table class="table">
      <tr>
          <th> Selected  </th>
          <th>  Name </th>    
      </tr>      
      <tr> 
          <td> @Html.CheckBoxFor(modelitem => item.IsChecked, new {})  </td> //only to count this checkbox
          <td> @Html.DisplayFor(modelitem => item.Name) </td>  
      </tr>         
 </table>
 <input type="text" class="form-control" id="edit-count-checked-checkboxes" name="count-checked-checkboxes" readonly="readonly" />

 <script>
      var $checkboxes = $(' input[type="checkbox"]');
        $checkboxes.change(function () {

            var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
            $('#edit-count-checked-checkboxes').val(countCheckedCheckboxes);
        });
 </script>

Скрипт хорошо работает для подсчета количества флажков, которые были проверены.Но мне нужно только посчитать количество флажков, которые были отмечены в списке таблиц.Как это сделать.Пожалуйста, помогите:)

Answer 1

Вы можете украшать элементы атрибутами data-, чтобы отличать их от остальных и группировать их.Подробнее об этом здесь .

В вашем примере флажкам, которые вы хотите сосчитать, может быть присвоен атрибут data-count-group="insidetable".

В MVC это можно сделатьследующим образом:

@Html.CheckBoxFor(modelitem => item.IsChecked, new { data_count_group = "insidetable" })

Используя jQuery, вы можете обнаружить изменения во всех флажках с этим атрибутом и сосчитать все отмеченные:

$('body').on('change', 'input[data-count-group]', function(e) {
    // get the group
    var group = $(this).data('count-group');

    // get the count for group
    var checkedCount = $('input[data-count-group="'+group+'"]:checked').length;

    // display the count
    $('span[data-count-total="'+group+'"]').text(checkedCount);
});

Вот рабочий пример с несколькими группамифлажки: https://jsfiddle.net/xd80a6r9/3/