在前端开发中，经常需要使用复选框来让用户选择多个选项。而在 AngularJS 中，我们可以使用 ng-model 指令来实现复选框的绑定。本文将详细介绍如何使用 ng-model 绑定多个复选框。
基础用法
首先，让我们看一下基本的使用方式。我们可以在 HTML 中使用 ng-model 指令来绑定一个变量，然后在复选框中使用 ng-model 指令来指定该变量。例如：
---- -------------- ----------------------- ------------- --------------- ------------------------------ ------------- --------------- ------------------------------ ------------- --------------- ------------------------------ ------
在上面的代码中，我们定义了一个 ng-app 和 ng-controller，然后在每个复选框中都使用了 ng-model="checked"。这样，当用户勾选或取消勾选复选框时，checked 变量的值会自动更新。
但是，这种方式只能绑定一个变量，如果我们需要绑定多个复选框，该怎么办呢？
绑定多个复选框
如果需要绑定多个复选框，我们可以使用 ng-model 指令的数组语法。例如：
---- -------------- ----------------------- ------------- --------------- ----------------------------------------- ------------- --------------- ----------------------------------------- ------------- --------------- ----------------------------------------- ------
在上面的代码中，我们定义了一个 options 数组，数组中包含了三个对象，每个对象都有一个 checked 属性。然后在每个复选框中，我们使用了 ng-model="options[x].checked" 来指定该复选框绑定的属性。
当用户勾选或取消勾选复选框时，对应的 checked 属性会自动更新。我们可以在控制器中初始化 options 数组，例如：
----------------------- ---
--------------------- ---------------- -
-------------- - -
- -------- ----- --
- -------- ----- --
- -------- ----- -
--
---这样，当用户勾选或取消勾选复选框时，options 数组中对应的对象的 checked 属性会自动更新。
指令 ng-checked
除了使用 ng-model 指令来绑定复选框，我们还可以使用 ng-checked 指令来判断复选框是否勾选。例如：
---- -------------- ----------------------- ------------- --------------- ------------------------------------------- ------------- --------------- ------------------------------------------- ------------- --------------- ------------------------------------------- ------
在上面的代码中，我们使用了 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