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-属性修饰元素，以将它们与其余元素区分开并进行分组。进一步了解here。

在您的示例中，可以为要计数的复选框赋予属性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/

如何显示已在表asp.net MVC Razor中选中的所有复选框的数量

1 个答案: