在前端开发中，经常需要使用复选框来让用户选择多个选项。而在 AngularJS 中，我们可以使用 ng-model 指令来实现复选框的绑定。本文将详细介绍如何使用 ng-model 绑定多个复选框。
基础用法
首先，让我们看一下基本的使用方式。我们可以在 HTML 中使用 ng-model 指令来绑定一个变量，然后在复选框中使用 ng-model 指令来指定该变量。例如：
<div ng-app="myApp" ng-controller="myCtrl"> <label><input type="checkbox" ng-model="checked">选项1</label> <label><input type="checkbox" ng-model="checked">选项2</label> <label><input type="checkbox" ng-model="checked">选项3</label> </div>
在上面的代码中，我们定义了一个 ng-app 和 ng-controller，然后在每个复选框中都使用了 ng-model="checked"。这样，当用户勾选或取消勾选复选框时，checked 变量的值会自动更新。
但是，这种方式只能绑定一个变量，如果我们需要绑定多个复选框，该怎么办呢？
绑定多个复选框
如果需要绑定多个复选框，我们可以使用 ng-model 指令的数组语法。例如：
<div ng-app="myApp" ng-controller="myCtrl"> <label><input type="checkbox" ng-model="options[0].checked">选项1</label> <label><input type="checkbox" ng-model="options[1].checked">选项2</label> <label><input type="checkbox" ng-model="options[2].checked">选项3</label> </div>
在上面的代码中，我们定义了一个 options 数组，数组中包含了三个对象，每个对象都有一个 checked 属性。然后在每个复选框中，我们使用了 ng-model="options[x].checked" 来指定该复选框绑定的属性。
当用户勾选或取消勾选复选框时，对应的 checked 属性会自动更新。我们可以在控制器中初始化 options 数组，例如：
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.options = [
{ checked: false },
{ checked: false },
{ checked: false }
];
});这样，当用户勾选或取消勾选复选框时，options 数组中对应的对象的 checked 属性会自动更新。
指令 ng-checked
除了使用 ng-model 指令来绑定复选框，我们还可以使用 ng-checked 指令来判断复选框是否勾选。例如：
<div ng-app="myApp" ng-controller="myCtrl"> <label><input type="checkbox" ng-checked="options[0].checked">选项1</label> <label><input type="checkbox" ng-checked="options[1].checked">选项2</label> <label><input type="checkbox" ng-checked="options[2].checked">选项3</label> </div>
在上面的代码中，我们使用了 ng-checked 指令来判断复选框是否勾选，ng-checked="options[x].checked" 表示如果 options 数组中对应的对象的 checked 属性为 true，则该复选框被勾选。
需要注意的是，使用 ng-checked 指令时，不需要使用 ng-model 指令来绑定变量。
总结
本文介绍了如何使用 ng-model 和 ng-checked 指令来绑定复选框，以及如何绑定多个复选框。希望能对你在 AngularJS 中处理复选框有所帮助。
示例代码如下：
-- -------------------- ---- ------- --------- ----- ----- --------------- ------ ------ ---------------- ----------------- -------- ---------------- -------- --------------------------------------------------------------------------------- --------- ------------------------ --- ----------------------- ---------------- - ----------------- - - ----- -------- ----- -- ----- -------- ----- -- ----- -------- ----- - ----- ----- ---------- ------- ----- ----------------------- -------------- --------------- ------------------------------ -------------- --------------- ------------------------------ -------------- --------------- ------------------------------ ----- -------------- --------------- ----------------------------------------- -------------- --------------- ----------------------------------------- -------------- --------------- ----------------------------------------- ----- -------------- --------------- ------------------------------------------- -------------- --------------- ------------------------------------------- -------------- --------------- ------------------------------------------- ------- -------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66287dc7c9431a720c57237d