在前端开发中，复选框（checkbox）是常用的表单元素之一。但有时候我们需要实现部分选中的效果，例如选择多个商品时显示已选数量和总价格等信息。本文将介绍如何使用JavaScript实现部分选中的效果。
HTML 结构
首先，我们需要在HTML中创建复选框列表，并为每个复选框添加一个唯一的ID：
-- -------------------- ---- -------
--- -------------------
----
------ --------------- --------------- ---------------
------ ----------------------------
-----
----
------ --------------- --------------- ---------------
------ ----------------------------
-----
----
------ --------------- --------------- ---------------
------ ----------------------------
-----
-----JavaScript 实现
接下来，我们使用 JavaScript 实现部分选中的效果。我们可以通过监听复选框的 change 事件来实现：
-- -------------------- ---- -------
----- ------------ - -----------------------------------------
----- ---------- - ------------------------------------------------------
-------- ---------------------- -
--- ------------ - --
--- ------------------ - --
--------------------------- ---------- -
-- ------------------ -
---------------
-
-- ----------------- --- ----- -- ---------------------- --- ----- -
---------------------
-
---
-- ------------- --- -- -
-------------------------- - ------
-------------------- - ------
- ---- -- ------------- --- ------------------ -
-------------------------- - ------
-------------------- - -----
- ---- -
-------------------- - ------
-------------------------- - -----
-
-
--------------------------- ---------- -
----------------------------------- -------- -- -
-----------------------
---
---在上面的代码中，我们首先获取到复选框列表和所有的复选框元素。然后通过 updateCheckboxStatus 函数来判断复选框的状态，并根据情况设置父级复选框的状态。
实现效果
当选中第一个复选框时，会显示部分选中的状态：
当选中所有复选框时，将显示全选的状态：
当没有任何复选框被选中时，将回归初始状态。
总结
本文介绍了如何使用 JavaScript 实现部分选中的复选框效果。这不仅是实用的功能，也有助于加深对 JavaScript 事件监听和 DOM 操作的理解。希望这篇文章能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29473