模拟ng-grid的checkbox功能

<div ng-show="ordersDrugMasterVO.dispenseStatus == '1' && ordersDrugMasterVO.prescType == '0'"><!--已发药西药-->
  <table class="table table-striped table-bordered">
    <thead>
      <th ng-click="selectAll()">
        <input type="checkbox" name="allCheck" id="allCheck" checked ng-model="allSelectStatus">
      </th>
      <th class="th-one" colspan="3">退费项目及规格</th>
      <th class="th-three">可退数量</th>
      <th class="th-four">金额</th>
    </thead>
  </table>
   <div class="table-body" hr-self-height="$(window).height()-262">
     <table class="table table-striped table-bordered">
      <tbody ng-repeat="prescDetail in drugPrescDetailList">
        <tr>
          <td class="text-left td-checkbox" rowspan="2" class="td-2-bottom-border">
            <input name="box" onclick="window.event.cancelBubble=true;" ng-click="changeCheck(prescDetail)"
              type="checkbox" id="detail_{{prescDetail.prescId}}_{{prescDetail.serialNo}}"is-check-box>
          </td>
          <td class="text-left td-one">{{prescDetail.drugName}}({{prescDetail.firmId}})&nbsp;&nbsp;
            {{prescDetail.packageSpec}}
          </td>
          <td class="text-left td-three">
            <div class="fix-width">
              <div class="pull-left"><b>
                <input type="text" number-only class="text-right" style=" 40px"
                  ng-model="prescDetail.quantity" ng-blur="checkQuantity($index)">&nbsp;&nbsp;{{prescDetail.packageUnits}}</b>               </div>              </div>           </td>           <td class="text-right td-four">             <div class="fix-width" ng-bind="prescDetail.costs | number : 2"></div>           </td>         </tr>       </tbody>     </table>   </div> </div>

紫色标注的是全选,或者反选的checkbox

绿色标注的是每一项的checkbox

全选的方法:selectAll()

function selectAll() {
  $("allCheck").attr("checked", $scope.allSelectStatus);
  $("input[name=box]").each(function () {
    if (this.id !== "detail__") {
      $(this).attr("checked", $scope.allSelectStatus);
    }
  });
  getSelectedItem();
}

getSelectedItem();

function getSelectedItem() {
    var checkbox = $("input[name='box']");
     $scope.saveDetailList.length = 0;
     for (var i = 0; i < checkbox.length; i++) {
         if (checkbox[i].checked) {
            $scope.saveDetailList.push($scope.drugPrescDetailList[i]);
        } else if (checkbox[i].id !== "detail__") {
                 $("#allCheck").attr("checked", false);
                  $scope.allSelectStatus = false;
         }
      }
 }

 单选的方法:changeCheck(prescDetail)

function changeCheck(detail) {
  $("#detail_" + detail.prescId + "_" + detail.serialNo).attr("checked", !$("#detail_" + detail.prescId + "_" + detail.serialNo).attr("checked"));
  getSelectedItem();
}
原文地址:https://www.cnblogs.com/ms-grf/p/7125058.html