複選框點擊功能不起作用

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