复选框列表是前端开发中常用的功能之一，而 Material Design 是 Google 推出的一套设计语言，它强调纸片、阴影和动画等元素，使得界面更加美观、易用。本文将介绍如何使用 Material Design 实现复选框列表，包括 HTML、CSS 和 JavaScript 的实现细节。同时，本文还提供了示例代码，供读者参考。
HTML 结构
首先，我们需要在 HTML 中定义一个列表，用来展示复选框选项。HTML 中的结构如下：
-- -------------------- ---- -------
--- -----------------
--- ----------------------
----- -------------------------------------
----- --------------------------------------
---- ---------------------
------ --------------- ------------------------------------ --------------- --
---- ---------------------------------
---- ------------------------------- ---------- - -- ----
----- ------------------------------------- ----------- -------------- --------- ----------- --
------
---- --------------------------------------
------
------
-----
--- ----------------------
----- -------------------------------------
----- --------------------------------------
---- ---------------------
------ --------------- ------------------------------------ --------------- --
---- ---------------------------------
---- ------------------------------- ---------- - -- ----
----- ------------------------------------- ----------- -------------- --------- ----------- --
------
---- --------------------------------------
------
------
-----
--- ----------------------
----- -------------------------------------
----- --------------------------------------
---- ---------------------
------ --------------- ------------------------------------ --------------- --
---- ---------------------------------
---- ------------------------------- ---------- - -- ----
----- ------------------------------------- ----------- -------------- --------- ----------- --
------
---- --------------------------------------
------
------
-----
-----以上代码定义了一个 ul 元素，其中每个 li 元素都包含了一个复选框和一个文本标签。复选框使用了 Material Design 提供的样式，包括 mdc-checkbox 和 mdc-checkbox__background。同时，为了实现点击效果，我们还需要添加 mdc-list-item__ripple 类。
CSS 样式
接下来，我们需要为复选框列表添加一些 CSS 样式，以使其更加美观和易用。CSS 样式如下：
-- -------------------- ---- ------- --------- - -------- -- ------- -- ----------- ----- - -------------- - -------- ----- ------------ ------- ------- -------- ------- ----- -------- - ----- - ---------------------- - --------- --------- ----- -- ---- -- ------ -- ------- -- -------------- ---- -------- -- --------------- ----- ---------- --------- ----------- ------- ---- ------- --------- ----- --------------- -- ---- --- ----------------- ------- -- -- ------ - ------------------------------------------ - -------- ----- ---------- --------- - -------------------- - ----- -- - ------------- - --------- --------- -------- ------------- ------ ----- ------- ----- --------------- ------- - ----------------------------- - --------- --------- ----- -------- - ------------------------- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- ------- --- ----- ----- -------------- ---- ----------------- ----- - ------------------------ - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ ------ ----- ------- ----- ------- --- ----- ----- -------------- ---- ----------------- ----- -------- -- ----------- ------- ----- ------- - ------------------------------------- - ------------------------- - ----------------- ----- ------------- ----- - ------------------------------------- - ------------------------- ------------------------ - ------------------ -- - ------------------------------------- - ------------------------- ------------------------ - -------- -- - ------------------------ - --------- --------- ---- -- ----- -- ------ ----- ------- ----- ----- ----- ------- ----- ------------- -- --------------- ------ ---------------- ------ ----------------- --- ------------------ --- ----------- ----------------- ----- ------- -
以上代码实现了复选框列表的样式，包括列表项、文本标签和复选框的样式。特别地，我们使用了 mdc-ripple 类实现了点击效果，同时使用了 mdc-checkbox 类实现了复选框的样式。
JavaScript 交互
最后，我们需要使用 JavaScript 实现复选框列表的交互功能，包括复选框的选中和取消选中。JavaScript 代码如下：
const checkboxes = document.querySelectorAll('.mdc-checkbox__native-control');
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function(event) {
const listItem = event.target.closest('.mdc-list-item');
listItem.classList.toggle('mdc-list-item--selected');
});
}以上代码使用了 querySelectorAll 方法选中了所有的复选框元素，然后使用 addEventListener 方法为每个复选框添加了一个 change 事件监听器。当复选框的选中状态发生变化时，我们使用 closest 方法找到最近的列表项元素，然后使用 classList 对其进行样式的切换。
示例代码
最后，我们将以上所有的 HTML、CSS 和 JavaScript 代码整合到一起，形成一个完整的示例。读者可以将其复制到本地环境中，进行调试和学习。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------ -------------
----- ---------------- ------------------------------------------------------------------
----- ---------------- ---------------------------------------------------------------
----- ---------------- -------------------------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------------------
----- ---------------- ---------------------------------------------------------------------------------------
-------
--------- -
-------- --
------- --
----------- -----
-
-------------- -
-------- -----
------------ -------
------- --------
------- -----
-------- - -----
-
---------------------- -
--------- ---------
----- --
---- --
------ --
------- --
-------------- ----
-------- --
--------------- -----
---------- ---------
----------- ------- ---- ------- --------- ----- --------------- -- ---- ---
----------------- ------- -- -- ------
-
------------------------------------------ -
-------- -----
---------- ---------
-
-------------------- -
----- --
-
------------- -
--------- ---------
-------- -------------
------ -----
------- -----
--------------- -------
-
----------------------------- -
--------- ---------
----- --------
-
------------------------- -
--------- ---------
---- --
----- --
------ -----
------- -----
------- --- ----- -----
-------------- ----
----------------- -----
-
------------------------ -
--------- ---------
---- ----
----- ----
---------- --------------- ------
------ -----
------- -----
------- --- ----- -----
-------------- ----
----------------- -----
-------- --
----------- ------- ----- -------
-
------------------------------------- - ------------------------- -
----------------- -----
------------- -----
-
------------------------------------- - ------------------------- ------------------------ -
------------------ --
-
------------------------------------- - ------------------------- ------------------------ -
-------- --
-
------------------------ -
--------- ---------
---- --
----- --
------ -----
------- -----
----- -----
------- -----
------------- --
--------------- ------
---------------- ------
----------------- ---
------------------ ---
----------- ----------------- ----- -------
-
--------
-------
------
--- -----------------
--- ----------------------
----- -------------------------------------
----- --------------------------------------
---- ---------------------
------ --------------- ------------------------------------ --------------- --
---- ---------------------------------
---- ------------------------------- ---------- - -- ----
----- ------------------------------------- ----------- -------------- --------- ----------- --
------
---- --------------------------------------
------
------
-----
--- ----------------------
----- -------------------------------------
----- --------------------------------------
---- ---------------------
------ --------------- ------------------------------------ --------------- --
---- ---------------------------------
---- ------------------------------- ---------- - -- ----
----- ------------------------------------- ----------- -------------- --------- ----------- --
------
---- --------------------------------------
------
------
-----
--- ----------------------
----- -------------------------------------
----- --------------------------------------
---- ---------------------
------ --------------- ------------------------------------ --------------- --
---- ---------------------------------
---- ------------------------------- ---------- - -- ----
----- ------------------------------------- ----------- -------------- --------- ----------- --
------
---- --------------------------------------
------
------
-----
-----
------- ------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------------
--------
----- ---------- - -----------------------------------------------------------
--- ---- - - -- - - ------------------ ---- -
---------------------------------------- --------------- -
----- -------- - ---------------------------------------
-----------------------------------------------------
---
-
--------------------------------------------------------------------------------
---------------------------------------------------------------------------
---------
-------
-------总结
本文介绍了如何使用 Material Design 实现复选框列表，包括 HTML、CSS 和 JavaScript 的实现细节。同时，本文提供了示例代码，供读者参考。通过本文的学习，读者可以了解到 Material Design 的设计理念和样式，以及如何使用 JavaScript 实现复选框列表的交互功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656a80ebd2f5e1655d2e8e55