1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  8.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  9.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  10.     <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
  11.  
  12. <body>
  13.  
  14.      <div ng-app='myApp' ng-controller='myCtrl'>
  15.         <div class="container">
  16.             <div class="row">
  17.                 <div class='col-md-10'>
  18.                     <table class="table table-bordered">
  19.                         <thead>
  20.                             <tr>
  21.                                 <th>
  22.                                     <input type="checkbox" ng-model='masterChecked' ng-click='checkMaster()' />
  23.                                 </th>
  24.                                 <th>id</th>
  25.                                 <td>name</td>
  26.                                 <td>age</td>
  27.                             </tr>
  28.                         </thead>
  29.                         <tbody>
  30.                             <tr ng-repeat="item in personList">
  31.                                 <td>
  32.                                     <input type="checkbox" ng-checked='item.checked' ng-click='checkChild(item)' />
  33.                                 </td>
  34.                                 <td>{{item.id}}</td>
  35.                                 <td>{{item.name}}</td>
  36.                                 <td>{{item.age}}</td>
  37.                             </tr>
  38.                         </tbody>
  39.                     </table>
  40.                 </div>
  41.             </div>
  42.         </div>
  43.     </div>
  44.  
  45.     <script>
  46.         var myApp = angular.module('myApp', []);
  47.         myApp.controller('myCtrl', function ($scope) {
  48.             //初始化表格数据
  49.             $scope.personList = [{
  50.                 checked: true,
  51.                 id: 1,
  52.                 name: '赵云',
  53.                 age: 50
  54.             }, {
  55.                 checked: true,
  56.                 id: 2,
  57.                 name: '曹操',
  58.                 age: 60
  59.             }, {
  60.                 checked: true,
  61.                 id: 3,
  62.                 name: '大司马',
  63.                 age: 50
  64.             }];
  65.             $scope.masterChecked = true
  66.             //主复选框选中事件
  67.             $scope.checkMaster = function () {
  68.                 if ($scope.masterChecked == true) {
  69.                     angular.forEach($scope.personList, function (item, index) {
  70.                         item.checked = true;
  71.                     });
  72.                 } else {
  73.                     angular.forEach($scope.personList, function (item, index) {
  74.                         item.checked = false;
  75.                     });
  76.                 }
  77.             }
  78.             //子复选框选中事件
  79.             $scope.checkChild = function (item) {
  80.                 //根据选中状态，调正v.checked值
  81.                 (item.checked == false) ? item.checked = true : item.checked = false;
  82.                 //若取消选中，则取消主复选框选中
  83.                 if (item.checked == false) {
  84.                     $scope.masterChecked = false;
  85.                 } else {
  86.                     //若选中，判断主复选框是否需要选中
  87.                     var temp = true;
  88.                     angular.forEach($scope.personList, function (item, index) {
  89.                         //若子复选框有一个未选中，则主复选框不必选中
  90.                         if (item.checked == false) {
  91.                             temp = false;
  92.                         }
  93.                     });
  94.                     //若子复选框全部选中，则选中主复选框
  95.                     $scope.masterChecked = temp;
  96.                 }
  97.             }
  98.         });
  99.  
  100.     </script>
  101. </body>
  102.  
  103. </html>

贴上效果图：

贴上源码：

备注：没有注释，抱歉今天还是一个不擅长做一个注释的小可爱.......

angularJS处理table中checkbox的选中状态的更多相关文章

  1. html5中checkbox的选中状态的设置与获取

    获取checkbox是否选中: $("#checkbox").is(":checked"); 获得的值为true或false. 设置checkbox是否选中: ...

  2. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  3. 如何设置Installshield中 feature的选中状态

    原文:如何设置Installshield中 feature的选中状态 上一篇: 使用strtuts2的iterator标签循环输出二维数组之前一直有筒子问如何设置Installshield中 feat ...

  4. android checkbox 未选中状态 已选中状态 替换成自己的图片

    效果图: 未选中状态: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  5. jQ无法设置checkbox变成选中状态

    设置以后checkbox并没有变成选中状态,用chrome调试看了一下,checkbox中确实有checked属性,针对这个问题,大家可以参考下本文 代码如下: $("input" ...

  6. jquery中CheckBox的checked状态用attr()的问题

    写了一个脚本,点按钮时选中checkbox,前几次可以选中,多点几次发现checkbox并未选中,调试后发现checked状态根本没有改变,后在网上查证与attr()函数有关,后改为prop问题解决. ...

  7. CheckBox 半选中状态

    <input type='checkbox' />可以半选中,这个特性,很多浏览器都支持,包括Firefox,Chrome和IE 用 input.indeterminate 这个属性来获取 ...

  8. checkBox半选中状态

    checkbox 可以半选中,这个特性,很多浏览器都支持 // 用 input.indeterminate 这个属性来获取或者设置半选中状态,必须要用 js 添加属性,才有效果. input.inde ...

  9. table获取checkbox是否选中的几种方法

    function test() { $(".table tbody tr").find("td:first input:checkbox").each(func ...

随机推荐

  1. InvalidOperationException: out of sync

    C#中不能在集合的迭代中修改集合数据

  2. 标准模板库(STL)学习指南之sort排序

    对于程序员来说,数据结构是必修的一门课.从查找到排序,从链表到二叉树,几乎所有的算法和原理都需要理解,理解不了也要死记硬背下来.幸运的是这些理论都已经比较成熟,算法也基本固定下来,不需要你再去花费心思 ...

  3. scrollHeight

    scrollHeight=显示内容高度+隐藏内容高度 参考: https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight ...

  4. css中的块级和内联元素

    块级元素: 首先说明display是块级元素,会单独站一行,如 代码: <!DOCTYPE html> <html> <head lang="en"& ...

  5. Java常见设计模式之工厂模式

    工厂模式在我们日常的应用中应当算是比较广泛的一种设计模式了.今天让我们一起来学习一下,工厂的设计模式. 工厂模式在<Java与模式>中分为三类:     1)简单工厂模式(Simple F ...

  6. C# 自定义颜色

    一.需要引用 using System.Windows.Media; 二. 自定义颜色 通过自定义 RGB 的值来达到自定义颜色的目的 Color _Mycolor = Color.FromRgb(5 ...

  7. C++ 替换字符串内某个字符或子串

    1. 问题描述 string s="abc"; string tmp="1"; 2.解决方案 // tmp 必须为字符串 // 第一个 1 表示 s 中的位置 ...

  8. TCP/IP以及Socket对象基本

    1 OSI七层模型概念介绍 物理层:数据以比特的方式进行传递,典型的设备是集线器.该层主要规定了设备的电压或者端口等等一些列物理层面上的规定     数据链路层:该层数据以帧的方式进行传递,主要是两个 ...

  9. mongodb 操作数据库

    1.使用和创建数据库: use mydb //没有就创建 2.显示数据库 show dbs 3.显示数据库状态 db.stats() 4.检查当前所用的数据库 db 5.删除数据库(先用然后删除) u ...

  10. 树莓派 Learning 002 装机后的必要操作 --- 02 解决中文问题

    树莓派 装机后的必要操作 - 解决中文问题 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 每一块树莓派,装机后都应该执行的步骤 刚装机后, ...