复选框点击功能不起作用

Question

我想用AngularJS，Jquery和MVC实现一个非常简单的事情，我在早期的项目中实现了这个功能。有一个表checkbox。表格标题包含一个复选框，当我点击复选框时，表格内的所有复选框将被选中，反之亦然。这是一种非常常见的检查/取消选择功能。

的HTML代码：

<div class="panel panel-primary"> 
    <div class="panel-heading">Category List</div> 
    <div style="padding: 5px"> 
     <div class="col-md-6"> 
      <a class="btn btn-danger" ng-click="removeSelectedRows()" ng-controller="categoryMultiDeleteController"><i class="glyphicon glyphicon-trash"></i>Delete</a> 
      <a class="btn btn-primary" href="#/category/newcategory"><i class="glyphicon glyphicon-file"></i>New</a> 
     </div> 

     <div class="col-xs-10 col-lg-6 col-md-6"> 
      <div class="input-group"> 
       <input type="text" id="searchText" class="form-control pull-right" placeholder="Search for..." ng-model="search_txt"> 
       <span class="input-group-btn"> 
        <button class="btn btn-default" type="button"> 
         <i class="text-muted glyphicon glyphicon-search"></i> 
        </button> 
       </span> 
      </div> 
     </div> 
    </div> 
    <div class="panel-body"> 
     <div class="table table-responsive"> 
      <table class="table table-striped" id="mytable"> 
       <thead> 
        <tr> 
         <th> 
          <input type="checkbox" id="checkAll" name="checkAll"> 
         </th> 
         <th>Category Name</th> 
         <th>Description</th> 
         <th></th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr dir-paginate="category in categories | filter:search_txt | itemsPerPage: pageSize" current-page="currentPage"> 
         <td style="padding-left: 9px; padding-top: 1px; padding-bottom: 1px; vertical-align: middle"> 
          <div style="height: 35px; overflow: auto;"> 
           <input type="checkbox" id="chkCategoryId" name="chkCategoryId" click="select()"/> 
          </div> 
         </td> 
         <td style="padding: 1px; vertical-align: middle"> 
          <div style="height: 35px; overflow: auto;">{{category.categoryName}}</div> 
         </td> 
         <td style="padding: 1px; vertical-align: middle"> 
          <div style="height: 35px; overflow: auto;">{{category.description}}</div> 
         </td> 
         <td style="padding: 1px; vertical-align: middle"> 
          <div style="height: 35px; overflow: auto;"> 
           <a class="btn btn-primary" href="#/category/{{category.categoryID}}" title="Edit"> 
            <i class="glyphicon glyphicon-edit"></i></a> 
          </div> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
    <div class="text-center"> 
     <dir-pagination-controls boundary-links="true" 
      on-page-change="pageChangeHandler(newPageNumber)" 
      template-url="app/dirPagination.tpl.html" 
      style="height: 30px; padding: 2px"> 
     </dir-pagination-controls> 
    </div> 
</div> 

的JavaScript是：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#checkAll').change(function() { 
      if (!$('#checkAll').prop('checked')) { 
       $('input[type="checkbox"]').each(function() { 
        $('input[type="checkbox"]').prop('checked', false); 
        $(this).checked = false; 
       }); 
      } else { 
       $('input[type="checkbox"]').each(function() { 
        $("input[name='chkCategoryId']").prop("checked", true); 
        $(this).checked = true; 
       }); 
      } 
     }); 

     function select() { 
      alert("ok"); 
     }; 
    }); 
</script> 

选择/取消选择所有功能运作良好，但点击表内的单个复选框未即工作时我点击一个复选框`select（）``函数没有调用并且alert不起作用。

任何帮助将会感激地接受。使用替代

Answer 1

ng-clickclick

<input type="checkbox" id="chkCategoryId" name="chkCategoryId" ng-click="select()"/> 

或者，可能是复选框，你也可以使用ng-change触发的复选框值之后完全改变了：

<input type="checkbox" id="chkCategoryId" name="chkCategoryId" ng-change="select()"/> 

有一个很微妙这两者之间的区别。

Answer 2

我改变了JavaScript，它现在工作。剧本是这样的：

$(document).on('change', 'input[name="chkCategoryId"]', function() { 
      if ($('input[name="chkCategoryId"]').length == $('input[name="chkCategoryId"]:checked').length) { 
       $("input[name='checkAll']").prop("checked", true); 
       $(this).checked = true; 
      } 
      else { 
       $("input[name='checkAll']").prop("checked", false); 
       $(this).checked = false; 
      } 
     });